jquery点击放大图片

最新推荐文章于 2023-06-26 15:29:07 发布

躲不过这哀伤

最新推荐文章于 2023-06-26 15:29:07 发布

阅读量154

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jas0203/p/11275876.html

版权

参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636

一、应用场景：点击图片可以对图片进行放大显示。

二、实现代码:

说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <title></title>
 5  <!--任一版本的jquery都可以-->
 6 <script src="jquery-1.10.2.min.js"></script>    
 7 <style>
 8  .enlargeImg_wrapper {
 9   display: none;
10   position: fixed;
11   z-index: 999;
12   top: 0;
13   right: 0;
14   bottom: 0;
15   left: 0;
16   background-repeat: no-repeat;
17   background-attachment: fixed;
18   background-position: center;
19   background-color: rgba(52, 52, 52, 0.8);
20   background-size: 37%;
21 }
22 img:hover {
23     cursor: zoom-in;
24 }
25 .enlargeImg_wrapper:hover {
26     cursor: zoom-out;
27 }
28     </style>
29 </head>
30 <body>
31     <img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" />
34     <div class="imgBox"></div>
35     <script type="text/javascript">
36     $(function() {
37         enlargeImg();
38     })
39     //关闭并移除图层
40     function closeImg() {
41         $('.enlargeImg_wrapper').fadeOut(200).remove();
42     }
43     //查看大图
44     function enlargeImg() {
45         $(".enlargeImg").click(function () {
46             $('.imgBox').html("<div  class='enlargeImg_wrapper'></div>");
47             var imgSrc = $(this).attr('src');
48             $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
49             $('.enlargeImg_wrapper').fadeIn(200);
50         })
51         $('.imgBox').on('click', '.enlargeImg_wrapper', function () {
52             $('.enlargeImg_wrapper').fadeOut(200).remove();
53         })
54     }
55     </script>
56 </body>
57 </html>

转载于:https://www.cnblogs.com/jas0203/p/11275876.html

躲不过这哀伤

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery点击放大图片

参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636一、应用场景：点击图片可以对图片进行放大显示。二、实现代码:说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。 1 <html> 2 <head> 3 <meta chars...
复制链接

扫一扫