<main class="container"> <div class="bg-light p-5 rounded text-center"> <h1>Navbar example</h1> <p class="text-center">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p> <a class="btn btn-lg btn-primary" href="https://v5.bootcss.com/docs/components/navbar/" role="button">View navbar docs »</a> </div> </main>将该文本内容及按钮改为图片及放大图片和缩小图片的按钮功能
时间: 2023-10-06 18:13:42 浏览: 86
抱歉,我无法以当前的文本格式直接转换成图片及按钮。但是,您可以使用HTML和JavaScript代码创建一个类似的效果。
以下是一个示例代码,其中包括一个图片和两个按钮,用于放大和缩小该图片:
```html
<!DOCTYPE html>
<html>
<head>
<title>Navbar example</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
img {
max-width: 100%;
max-height: 80vh;
}
button {
margin: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
</style>
</head>
<body>
<main class="container">
<div class="bg-light p-5 rounded text-center">
<h1>Navbar example</h1>
<p class="text-center">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
<img id="image" src="https://via.placeholder.com/500x300" alt="image">
<div>
<button id="zoom-in">Zoom In</button>
<button id="zoom-out">Zoom Out</button>
</div>
</div>
</main>
<script>
const image = document.getElementById('image');
const zoomInButton = document.getElementById('zoom-in');
const zoomOutButton = document.getElementById('zoom-out');
let scale = 1;
zoomInButton.addEventListener('click', () => {
scale += 0.1;
image.style.transform = `scale(${scale})`;
});
zoomOutButton.addEventListener('click', () => {
scale -= 0.1;
image.style.transform = `scale(${scale})`;
});
</script>
</body>
</html>
```
在这个示例中,我们创建了一个带有图片和两个按钮的容器,并使用CSS样式对其进行布局。在JavaScript代码中,我们为放大和缩小按钮添加了事件监听器,并使用CSS transform属性来控制图像的缩放比例。
阅读全文