点击缩略图查看大图效果,这里存在一个如何获取图片真实大小的问题。在手机端页面,插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸 ,我们的bootstrap响应式针对图片的解决方案如下:
.img-responsive{display: block;max-width: 100%;height: auto;}
手机端真实效果如图所示,点击图片呈现的效果和图片在页面上本身呈现的效果大小一样,那我们的点击放大图片效果就没有任何意义了。
我们想要的是页面上显示的是小图,点击显示的是真实图片的大小
页面布局思路:
1 我们要创建一个遮罩层#outdiv
2 装图片的容器div。.indiv
3 显示大图的img标签
.result{position: fixed;top:0;left:0;background: rgba(0,0,0,0.5);z-index:1000;width:100%;height:100%;display: none;} .imgresult{border:5px solid #fff;}.indiv{position: absolute;}
<div class="result" id="outdiv"><div class="indiv"><img class="imgresult" id="bigimg" src=""></div> </div>
<div class="ptb10 clearfix">支付截图:<img src="images/mao.jpg" class="imgclass img-responsive" style="width:30%;"></div><div class="ptb10 clearfix">身份证图片:<img src="images/example.png" class="imgclass img-responsive" style="width:30%;"></div>
想实现这种点击放大效果,我们就要用JS来实现了。具体的JQuery实现思路如下:
1 获取手机浏览器窗口的宽度和高度。winW,winH
2 获取图片的真实大小 。imgW,imgH。这里不能直接去获取图片的宽度高度$(".imgclass").width(),$('.imgclass').height(),获取的不是图片真实的宽度和高度
1> 需要创建一个img标签
2> 获取 要放大图片的 src地址(imgsrc),让新创建的img的src地址等于imgsrc
3> 新创建的图片加载完成后,重新获取新创建的图片的大小,此时获取的图片宽度和高度 才是图片的真实大小
3 比较图片大小和浏览器窗口的大小。如果 图片的真实宽度大于浏览器窗口的宽度(imgW > winW),设置图片的宽度等于浏览器的宽,图片的高度设置为auto。如果 图片的真实宽度小于浏览器窗口的宽度(imgW < winW),图片就按原尺寸大小展示。
4 让遮罩层(#oudiv),fadein和fadeout在click事件里来回切换。
这样一个点击图片实现放大效果就实现了,好开心,我的JS思路已经按步骤表达的很清楚啦,相信大家都能看懂。来直接上代码!
function showImg(outdiv,indiv,bigimg,thiselement){var winW = $(window).width();var winH = $(window).height();var src = $(thiselement).attr('src');$(bigimg).attr("src",src);$("<img/>").attr("src",src).load(function(){var imgW = this.width; var imgH = this.height;var scale= imgW/imgH;if( imgW > winW ){$(bigimg).css("width","100%").css("height","auto");imgH = winW/scale;var h=(winH-imgH)/2; $(indiv).css({"left":0,"top":h});}else{ $(bigimg).css("width",imgW+'px').css("height",imgH+'px');var w=(winW-imgW)/2;var h=(winH-imgH)/2;$(indiv).css({"left":w,"top":h});}$(outdiv).fadeIn("fast");$(outdiv).click(function(){$(this).fadeOut("fast");}); });}$('.imgclass').click(function(){var thiselement=$(this);showImg("#outdiv",".indiv","#bigimg",thiselement);});
但这样也不是最完美的,如何在手机端双击或者触摸 放大图片(#bigimg)可以让图片实现局部放大效果呢?又有了新的挑战 ,加油。待续~~