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 相关文章推荐
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
Vue快速实现通用表单验证的方法
Feb 24 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
搜索附近的人PHP实现代码
2018/02/11 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
jquery创建div 实现代码
2009/04/27 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
python简单分割文件的方法
2015/07/30 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
Python选课系统开发程序
2016/09/02 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
python binascii 进制转换实例
2019/06/12 Python
pandas.cut具体使用总结
2019/06/24 Python
python把转列表为集合的方法
2019/06/28 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
项目管理计划书
2014/01/09 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
房产公证书范本
2014/04/10 职场文书
体育活动总结范文
2014/05/04 职场文书
心理健康日活动总结
2014/05/08 职场文书
2014和解协议书范文
2014/09/15 职场文书
雷锋之歌观后感
2015/06/10 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers