jquery点击放大图片
生活随笔
收集整理的這篇文章主要介紹了
jquery点击放大图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考地址：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>
總結
以上是生活随笔為你收集整理的jquery点击放大图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国为什么要有自己的空间站？看完你就懂了
- 下一篇： 计算日期之差