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 相关文章推荐
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 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实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
js实现图片轮播效果
2015/12/19 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
python 实现简易的记事本
2020/11/30 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
学习十八大的心得体会
2014/09/01 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
教师远程研修感悟
2015/11/18 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers