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与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Vue DevTools调试工具的使用
Dec 05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
2016/11/09 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
js中开关变量使用实例
2017/02/24 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
Python translator使用实例
2008/09/06 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Django日志及中间件模块应用案例
2020/09/10 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
Linux的文件类型
2016/07/05 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
升国旗仪式主持词
2014/03/19 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
2014年优秀党员材料
2014/12/18 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
Python+Appium新手教程
2021/04/17 Python
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技