js手机端图片弹出方法

 1 　　 $("img").click(function(){
　　　　　　　　　//获取窗口可视大小
 2             var width=$(window).width();
 3             var height=$(window).height();
 4             var img=$(this);
 5             var html='';
　　　　　　　　　//获取图片的真实宽高
 6             $("<img/>").attr("src", $(img).attr("src")).load(function() {               
 7                 realWidth = this.width;
 8                 realHeight = this.height;
 9                //如果真实的宽度大于浏览器的宽度就按照100%显示
10                 if(realWidth>=width ){
11                        //$(img).css("width","100%").css("height","auto");
12                        width="100%";
13                        height="auto";
14                     }
15                     else{//如果小于浏览器的宽度按照原尺寸显示
16                       //$(img).css("width",realWidth+'px').css("height",realHeight+'px');
17                       width=realWidth;
18                       height=realHeight;
19                     }
20                 html='<img src="'+$(this).attr("src")+'" style=" width:'+width+'"/>';
　　　　　　　　　　　//这里借用了layer.mobile弹出插件
21                 var pagei = layer.open({
22                     type: 1,
23                     content: html,
24                   //  style: 'position:fixed; left:0; top:0; width:100%; height:100%; border:none;'
25                 });
26             });
27             
28         });

 

转载于:https://www.cnblogs.com/-lpf/p/5383636.html