html实现点击图片放大功能

最新推荐文章于 2024-06-07 13:51:40 发布

weixin_30511107

最新推荐文章于 2024-06-07 13:51:40 发布

阅读量4.9k

点赞数 4

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/yulongcode/p/10582794.html

版权

话不多说，直接上代码

 1 <html>
 2     <head>
 3         <style>
 4             .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
 5             .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
 6         </style>
 7         <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 8     </head>
 9     <body>
10         <div class="over"></div><!--背景层-->
11         <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少-->
12             <img src="test.jpg"/><!-- 此处是引入图片的路径 -->
13         </div>
14         <script>
15             $(document).ready(function () {
16                 var imgsObj = $('.amplifyImg img');//需要放大的图像
17                 if(imgsObj){
18                     $.each(imgsObj,function(){
19                         $(this).click(function(){
20                             var currImg = $(this);
21                             coverLayer(1);
22                             var tempContainer = $('<div class=tempContainer></div>');//图片容器
23                             with(tempContainer){//width方法等同于$(this)
24                                 appendTo("body");
25                                 var windowWidth=$(window).width();
26                                 var windowHeight=$(window).height();
27                                 //获取图片原始宽度、高度
28                                 var orignImg = new Image();
29                                 orignImg.src =currImg.attr("src") ;
30                                 var currImgWidth= orignImg.width;
31                                 var currImgHeight = orignImg.height;
32                                 if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图
33                                     if(currImgHeight<windowHeight){
34                                         var topHeight=(windowHeight-currImgHeight)/2;
35                                         if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/
36                                             topHeight=topHeight-35;
37                                             css('top',topHeight);
38                                         }else{
39                                             css('top',0);
40                                         }
41                                         html('<img border=0 src=' + currImg.attr('src') + '>');
42                                     }else{
43                                         css('top',0);
44                                         html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
45                                     }
46                                 }else{
47                                     var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
48                                     if(currImgChangeHeight<windowHeight){
49                                         var topHeight=(windowHeight-currImgChangeHeight)/2;
50                                         if(topHeight>35){
51                                             topHeight=topHeight-35;
52                                             css('top',topHeight);
53                                         }else{
54                                             css('top',0);
55                                         }
56                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
57                                     }else{
58                                         css('top',0);
59                                         html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
60                                     }
61                                 }
62                             }
63                             tempContainer.click(function(){
64                                 $(this).remove();
65                                 coverLayer(0);
66                             });
67                         });
68                     });
69                 }
70                 else{
71                     return false;
72                 }
73                 //使用禁用蒙层效果
74                 function coverLayer(tag){
75                     with($('.over')){
76                         if(tag==1){
77                             css('height',$(document).height());
78                             css('display','block');
79                             css('opacity',1);
80                             css("background-color","#FFFFFF");
81                             css("background-color","rgba(0,0,0,0.7)" );  //蒙层透明度
82                         }
83                         else{
84                             css('display','none');
85                         }
86                     }
87                 }
88             });
89         </script>
90     </body>
91 </html>

over！over！over！

转载于:https://www.cnblogs.com/yulongcode/p/10582794.html

weixin_30511107

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html实现点击图片放大功能

话不多说，直接上代码 1 <html> 2 <head> 3 <style> 4 .over {position: fixed; left:0; top:0; width:100%; z-index:100;} 5 .tempContainer {position:f...
复制链接

扫一扫