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>

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

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

- 2 第二种点击图片全屏居中显示（推荐这种实现方式）
HTML的样式部分：

代码部分用到了字符串的拼接（可以以后做参考用）：
重要的是第二行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 的说明）

  // 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点击缩略图,整屏居中放大图片相关推荐

Html显示缩略图点击展示,JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大 ...
js点击视频播放以及封面背景图片
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
js 点击往div里添加图片（实例）
<!DOCTYPE html> <html> <head><title></title> </head> <body> ...
点击图片实现图片居中放大的功能
如题,我想要点击图片的时候弹出居中显示放大.这个功能也是看别人的实现方法而来的,只是有细微的变化轻松解决点击图片放大问题下面是我自己仿造他写的 <!DOCTYPE html> <h ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
html+js 点击图片放大、点击图片全屏
html 点击图片放大,图片全屏,再点击关闭全屏,我这里直接整理成一个js,使用方便. 使用步骤: 1.引用 jq 2.引用 imgEnlarge.js. 3.没了. 直接上代码,这个是测试代码. & ...
h5 img js 点击图片放大_网页对应图片点击放大 html+js
$(function() { $('img').click(function() { var _this = $(this);// 将当前的pimg元素作为_this传入函数 imgShow(&quo ...
html基础总结4-实现点击图片弹出放大图片--不用插件
实现点击图片弹出放大图片--不用插件 <td width="350"> <img height="100" width="100&q ...
微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...

js点击缩略图,整屏居中放大图片

js点击缩略图,整屏居中放大图片相关推荐

最新文章

热门文章