JQuery实现点击缩略图查看大图效果

点击缩略图查看大图效果，这里存在一个如何获取图片真实大小的问题。在手机端页面，插入的图片大小都是按照图片的原始尺寸在展示的，如果图片太大完全超出手机的屏幕尺寸，我们的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="data:images/mao.jpg"  class="imgclass img-responsive" style="width:30%;"></div>
<div class="ptb10 clearfix">身份证图片：<img src="data: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）可以让图片实现局部放大效果呢？又有了新的挑战，加油。待续~~

JQuery实现点击缩略图查看大图效果相关推荐

[Android开发] 实现点击缩略图查看大图的功能
Android 实现点击缩略图查看大图的功能 1 思路分析在本次项目的开发过程中,想实现这样一个常见功能,即点击页面上的小图查看大图,点击大图则关闭的功能. 该需求的实现思路一般有两种:一种是直接跳 ...
android 点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
今天找到了一个我用了很好的方法,点击缩略图,放大居中展示,且参数可调,亲测可靠. 代码使用意见,将下面的代码放到本地测试效果,可以用一张自己的照片,点击会放大,再次点击还原. 一.需求点击图片查看 ...
【Android视图效果】共享元素实现仿微信查看大图效果
在之前的文章中,我们通过动画实现了这个,具体可以查看[Android 动画]动画详解之仿微信查看大图效果(四),这里,我们用过度动画来实现. 什么是共享元素? 它是Android 5.0新加入的一种过 ...
仿微博、微信、qq 点击缩略图, 查看高清图 UI 组件
TransferImage 项目地址:Hitomis/TransferImage 简介:仿微博.微信.qq 点击缩略图, 查看高清图 UI 组件更多:作者提 Bug 标签: Image ...
html点击小图标显示全屏查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof .exampleImg { height:100 ...
php图片点击查看大图,基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧...
一.需求点击图片查看大图,再点大图隐藏.多用于移动端,因为移动端屏幕小,可能需要查看大图. 二.代码 JQuery点击图片查看大图by starof 三.技巧因为移动端无法添加热点,最终一个解决方 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&qu ...
iOS UILabel加载html点击图片查看大图附demo
我们在有些时候,因为性能和加载时间的问题,需要用UILabel加载html的方式来代替webview. 大部分情况,UILabel都可以很好的展示出想要的效果,但是却不能满足点击查看大图的需求. 本解 ...

JQuery实现点击缩略图查看大图效果

JQuery实现点击缩略图查看大图效果相关推荐

最新文章

热门文章