点击图片放大至原始图片大小-创新互联
有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了:
创新互联建站是专业的勐海网站建设公司,勐海接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行勐海网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){ var img = this; var realWidth;//真实的宽度 var realHeight;//真实的高度 $("").attr("src", $(img).attr("src")).load(function() { realWidth = this.width; realHeight = this.height; }) var flag = 1; $(img).on("click",function () { if (flag == 1) { if(realWidth>=_w){ $(img).css({ "width": "100%", "height": "auto", "position": "fixed", "top": "50%", "left": "50%", "margin-top": "-30%", "margin-left": "-50%" }); }else{ $(img).css({ "width": realWidth, "height": realHeight, "position": "fixed", "top": "50%", "left": "50%", "margin-top": -realHeight / 2, "margin-left": -realWidth / 2 }); } flag = 0; } else { $(img).css({ "width": 500, "height": 400, }); flag = 1; } }); });以上代码获取图片原始宽高为转载,进行加工后如上。亲测有效,但是对于图片上传后,点击方法后,貌似并不能获取到原始宽高,我想应该是load的原因,还请懂的大神多多指点,如何实现上传的图片文件,点击缩略图,放大至原始大小!!!
另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前文章:点击图片放大至原始图片大小-创新互联
链接分享:http://lswzjz.com/article/cdpeie.html