码迷,mamicode.com
首页 > 移动开发 > 详细

js手机端图片弹出方法

时间:2016-04-12 19:14:32      阅读:493      评论:0      收藏:0      [点我收藏+]

标签:

 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 });

 

js手机端图片弹出方法

标签:

原文地址:http://www.cnblogs.com/-lpf/p/5383636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!