JS点击缩略图整屏居中放大图片效果


Posted in Javascript onJuly 04, 2017

需要实现的效果图:

JS点击缩略图整屏居中放大图片效果

今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度。

1 第一张点击图片将图片放大

下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢):

<div>
 <img class="dialog" src="xxx.jpg">
 <div id="dialog_large_image"></div>
</div>
<script type="text/javascript">
 $(function () {
  $("img.dialog").click(function() {
   var large_image = '<img src= ' + $(this).attr("src") + '></img>';
   $('#dialog_large_image').html($(large_image).animate({ height: '50%', width: '50%' }, 500));
  });
 });
</script>

上述代码实现的效果如下图所示:

JS点击缩略图整屏居中放大图片效果

这个是最基本的渐变的效果实现。

- 2 第二种点击图片全屏居中显示(推荐这种实现方式)

HTML的样式部分:

JS点击缩略图整屏居中放大图片效果

代码部分用到了字符串的拼接(可以以后做参考用):

重要的是第二行var html = ...

for (var i in result_array) {
  var html = '';
  var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128"></div></div> <div class="waterfall_stream_pic"><div class="item">';
  if (result_array[i]['photo_url']) {
  html += '<img class="zoom" src="' + result_array[i]['photo_url'] + '?imageView2/1/w/128/h/128">';
  }
  html += '<div><span>' + result_array[i]['final_score'] + '</span><span>(' + result_array[i]['baby_gender'] + '宝' + ')</span><p>' + parseInt(result_array[i]['age_in_month']/12) + '周岁'+ result_array[i]['age_in_month']%12 + '个月</p>';
  html += '</div></div></div>';
  $container_pics.append(html);
 }
 }

CSS 样式部分(点击缩略图显示的一些代码,很重要~注意z-index: 100;这个属性值的作用)

#dialog_pic {
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.65);
 z-index: 100;
 display: none;
 .dialog-body {
 width: 100%;
 max-width: 250px;
 max-height: 300px;
 margin: 0 auto;
 padding: 10px;
 border-radius: 5px;
 background: white;
 overflow: auto;
 margin-top: 283px;
 img {
  width: 100%;
 }
 }
}

这里必须使用on事件来获取元素的点击事件,onclick不产生作用(为什么不产生作用,请看上一篇文章的关于on 和onclick 的说明)

JS点击缩略图整屏居中放大图片效果 
JS点击缩略图整屏居中放大图片效果

JS点击缩略图整屏居中放大图片效果

// pic zoom
 $(function() {
 //获取缩略图的点击事件,然后将大图片展示出来(样式里默认显示为```none```)
 $('.result_pics').on('click', 'img.zoom', function() { 
  var $dialog = $('#dialog_pic'); //这里的dialog_pic是整个大图的显示区域(请注意,这里之只有采用变量赋值的方式是为了

下面的代码看起来很简洁,方便自己,方便他人)

$dialog.show();
  // outerHeight声明了整个窗口的高度
  // 此处的代码通过上面的图片,我已经标注出来了相应的区域部分。整个页面减去大图片显示区域从上到图片的最底边所产生的距离,然后除2就可以实现图片的放大居中了。
  var marginTop = ($dialog.outerHeight() - $('.dialog-body', $dialog).outerHeight()) / 2;
  $('.dialog-body', $dialog).css({
  marginTop: marginTop
  });
 });
 // 点击显示的大图,触发事件,当触发当前页面内里任何处位置,就会隐藏显示的大图
 $('.result_pics').on('click', '#dialog_pic', function() {  
  $(this).hide();
 });
 });

至此,点击缩略图显示大图的功能到这里基本实现。但是这里有一个bug就是放大的图片有失真,不清晰(注:明天排查下是什么原因导致的~)

解决上面存留的bug:(bug出现了2个,一个是点击放大的图片失真,另一个是原图放大之后图片会旋转)

1.点击放大的图片失真(这个是我一开始没放原图<img src="' + result_array[i]['photo_url'] ">即后面不带参数)

var html = '<div id="dialog_pic"><div class="dialog-body"><img src="' + result_array[i]['photo_url'] + '?imageMogr/auto-orient"></div></div> <div class="waterfall_stream_pic"><div class="item">';

2.解决旋转的方案(这个参数一般就是为了解决客户端IOS/Android图片横竖屏的问题,当然放在网页端应用也是OK的):

imageMogr/auto-orient

至此,点击缩略图显示大图的功能实现,已全部OK ~

JS点击缩略图整屏居中放大图片效果

以上所述是小编给大家介绍的JS点击缩略图整屏居中放大图片效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
JS实现随机抽取三人
Nov 06 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
vue实现简单跑马灯效果
May 25 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 #Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 #Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 #Javascript
Node.js使用gm拼装sprite图片
Jul 04 #Javascript
JavaScript中document.referrer的用法详解
Jul 04 #Javascript
基于hover的用法实例(推荐)
Jul 04 #Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 #Javascript
You might like
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
php解决约瑟夫环示例
2014/04/09 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python实现字典的key和values的交换
2015/08/04 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
毕业求职自荐信格式是什么
2013/11/19 职场文书
小区门卫值班制度
2014/01/24 职场文书
廉洁使者实施方案
2014/03/29 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
保险公司增员口号
2015/12/25 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js