首页jquery点击放大图片

jquery点击放大图片

时间: 2024-01-25 07:04:41 浏览: 148

以下是使用jQuery实现点击放大图片的示例： ```html <!DOCTYPE html> <html> <head> <title>点击放大图片</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <style> .image-container { position: relative; display: inline-block; } .image-container img { width: 200px; height: 200px; transition: transform 0.3s ease; } .image-container img:hover { transform: scale(1.2); } </style> </head> <body> <div class="image-container"> <img src="image.jpg" alt="图片"> </div> <script> $(document).ready(function() { $('.image-container img').click(function() { $(this).toggleClass('enlarge'); }); }); </script> </body> </html> ``` 在上述示例中，我们首先引入了jQuery库。然后，我们使用CSS样式定义了一个包含图片的容器，并设置了图片的初始大小和过渡效果。当鼠标悬停在图片上时，我们使用CSS的`transform`属性将图片放大到1.2倍。在JavaScript部分，我们使用`$(document).ready()`函数来确保页面加载完成后再执行代码。然后，我们使用jQuery的`.click()`函数来为图片添加点击事件。当图片被点击时，我们使用`.toggleClass()`函数来切换一个名为`enlarge`的CSS类，从而实现点击放大和恢复原始大小的效果。

阅读全文