首页 > 代码库 > 点击图片放大至原始图片大小
点击图片放大至原始图片大小
有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了:
var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){ var img = this; var realWidth;//真实的宽度 var realHeight;//真实的高度 $("<img/>").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的原因,还请懂的大神多多指点,如何实现上传的图片文件,点击缩略图,放大至原始大小!!!
本文出自 “小叙前端” 博客,请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1881158
点击图片放大至原始图片大小
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。