<div class="container-fluid"> <p id="title" class="title">设计图</p> <div id="img-responsive" class="row"> <img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid"> <p class="next-page" style="text-align: center;"><small>-----下一张-----</small></p> <img src="https://static.runoob.com/images/mix/paris.jpg" class="img-fluid"> </div> </div> 在这个代码片段中,该如何使用js,才能实现不管在什么时候点击图片,图片都能够放大的功能
时间: 2023-08-14 07:09:59 浏览: 110
JS实现点击图片放大效果
5星 · 资源好评率100%
要实现点击图片放大的功能,在不管何时点击图片时都能触发放大效果,可以使用事件委托的方式来处理。以下是一个示例代码:
```javascript
// 获取图片容器元素
var imageContainer = document.getElementById('img-responsive');
// 添加点击事件监听器到图片容器
imageContainer.addEventListener('click', function(event) {
// 检查被点击的元素是否为图片
if (event.target.tagName === 'IMG') {
// 在点击时将被点击的图片放大
event.target.style.transform = 'scale(2)';
}
});
```
在上述示例中,我们首先通过 `document.getElementById` 获取到图片容器元素 `imageContainer`,并将点击事件监听器添加到图片容器上。然后,在点击事件处理程序中,我们通过 `event.target` 来获取被点击的元素,然后检查其标签名是否为 `'IMG'`,以判断是否为图片元素。如果是图片元素,则将其 `transform` 样式属性设置为 `scale(2)`,以放大图片。
请确保将以上 JavaScript 代码放在 HTML 文档加载完毕后执行,例如将其放在 `<script>` 标签中,并将该标签放在 HTML 文档的底部,或者使用 DOMContentLoaded 或 window.onload 事件来确保代码在 DOM 准备好后执行。
阅读全文