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

 

js手機端圖片彈出方法