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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jQuery.each使用详解
Jul 07 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
利用PHP创建动态图像
2006/10/09 PHP
php代码把全角数字转为半角数字
2007/12/10 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
vue封装swiper代码实例解析
2019/10/08 Javascript
Python3.7实现中控考勤机自动连接
2018/08/28 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
django配置app中的静态文件步骤
2020/03/27 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
python中有帮助函数吗
2020/06/19 Python
Keras实现DenseNet结构操作
2020/07/06 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
《一件运动衫》教学反思
2014/02/19 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
初中体育课教学反思
2016/02/16 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
SQL Server中锁的用法
2022/05/20 SQL Server
Docker部署Mysql8的实现步骤
2022/07/07 Servers
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS