zoukankan      html  css  js  c++  java
  • 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+'"/>';            //这里借用了layer.mobile弹出插件
    21 var pagei = layer.open({ 22 type: 1, 23 content: html, 24 // style: 'position:fixed; left:0; top:0; 100%; height:100%; border:none;' 25 }); 26 }); 27 28 });
  • 相关阅读:
    红黑树(RBTree)
    js闭包简要分析
    html 5的localstorag
    浅析CSS中的haslayout
    初识sass框架
    BFC块级格式化上下文简述
    RESTful互联网框架
    javascript的框架演化
    浅析angular框架的cookie
    angular template浅析
  • 原文地址:https://www.cnblogs.com/-lpf/p/5383636.html
Copyright © 2011-2022 走看看