点击图片实现图片放大_点击图片放大

作者：寸_铁 | 2024-08-11 04:31:44

踩

点击图片放大

点击图片实现图片放大的效果：

我们经常会看到当我们点击图片的时候，图片可以放大，放到原来本身的样子，看起来特别舒服。
今天我参考了网上一些经验实现了图片放大功能。

首先我们看代码：

 <html>
<head>
    <style>
        .over {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 100; 
        }

        .tempContainer {
            position: fixed;
            width: 100%;
            margin-right: 0px;
            margin-left: 0px;
            text-align: center;
            z-index: 101;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
    <div class="over"></div><!--背景层-->
    <div class="logoImg amplifyImg"  >
        <!--注意：此处的amlifyImg不可少-->
        <img src="~/images/chun.jpg"  style="cursor:pointer;"/><!-- 此处是引入图片的路径 -->
    </div>
       <script>
        $(document).ready(function () {
            var imgsObj = $('.amplifyImg img');//需要放大的图像
            if (imgsObj) {
                $.each(imgsObj, function () {
                    $(this).click(function () {
                        var currImg = $(this);
                        coverLayer(1);
                        var tempContainer = $('<div class=tempContainer></div>');//图片容器
                        with (tempContainer) {//width方法等同于$(this)
                            appendTo("body");
                            var windowWidth = $(window).width();//窗口的宽度
                            var windowHeight = $(window).height();//窗口的高度
                            //获取图片原始宽度、高度
                            var orignImg = new Image();
                            orignImg.src = currImg.attr("src");
                            var currImgWidth = orignImg.width;
                            var currImgHeight = orignImg.height;
                            if (currImgWidth < windowWidth) {//为了让图片不失真，当图片宽度较小的时候，保留原图
                                if (currImgHeight < windowHeight) {
                                    
                                    var topHeight = (windowHeight - currImgHeight) / 2;
                                    //if (topHeight > 35) {/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
                                    //    topHeight = topHeight - 35;
                                    //    css('top', topHeight);
                                    //} else {
                                    //    css('top', 0);
                                    //}
                                    css('top', topHeight);//上面是适应安卓的，这是适应pc端的
 
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px;"><img src="/images/ico_left.png"   /></div><div ><img border=0 src=' + currImg.attr('src') + '></div ><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                } else {
                                      
                                    css('top', 0);
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                }
                            } else {
                                 
                                var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
                                if (currImgChangeHeight < windowHeight) {
                                     
                                    var topHeight = (windowHeight - currImgChangeHeight) / 2;//让图片居中显示
                                    //if (topHeight > 35) {
                              
                                    //    topHeight = topHeight - 35;
                                    //    css('top', topHeight);
                                    //} else {
                                    
                                    //    css('top', 0);
                                    //}
                                     css('top', topHeight);//上面是适应安卓的，这是适应pc端的
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                } else {
                                     
                                    css('top', 0);
                                    html('<div  id="body-left" style="height:' + windowWidth + 'px; "><img src="/images/ico_left.png"   /></div><div><img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + 'height=' + windowHeight + '></div><div id="body-right" style=" height:' + (windowHeight+35) + 'px;  margin-top:' + -windowHeight + 'px;"><img src="/images/ico_right.png" /></div>');
                                }
                            }
                        }
                        //tempContainer.click(function () {
                        //    $(this).remove();
                        //    coverLayer(0);
                        //});
                        show();
                    });
                });
            }
            else {
                return false;
            }
            //使用禁用蒙层效果
            function coverLayer(tag) {
                with ($('.over')) {
                    if (tag == 1) {
                        css('height', $(document).height());
                        css('display', 'block');
                        css('opacity', 1);
                        css("background-color", "#FFFFFF");
                        css("background-color", "rgba(0,0,0,0.8)");  //蒙层透明度
                    }
                    else {
                        css('display', 'none');
                    }
                }
            }

            function show() {
                 $(".tempContainer").on("click", "#body-left ", function () {

                alert(1);

            });
              $(".tempContainer").on("click", "#body-right ", function () {

                alert(2);

            });

            }
            
        });
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

难点我都具体分析了。

看看效果图吧。

在这里插入图片描述

这是浏览图，点击后的效果是：

在这里插入图片描述
看起来还不错。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/962190