长沙网站建设教您制作图片的点击放大效果

长沙网站建设教您使用JavaScript，实现图片的点击放大效果

日常访问网站时，我们经常能看到一个页面中存在很多图片，有的时候我们想要看清楚图片的细节，就只能将图片下载下来放大，十分不方便。

为了便于用户查看图片的细节，就让长沙网站建设来教您，使用JavaScript实现图片的点击放大效果吧！代码如下：

* {margin: 0;padding: 0;}

.index {

width: 100%;

height: 100%;

text-align: center;

margin: 100px auto;}

.imga {

display: inline-block;

margin: 0 30px auto 0;

cursor: pointer;

transition: all 0.5s;

}

.imga img{

max-width: 300px;

display: block;

width: 100%;

}

.pop {

display: none;

width: 100%;

height: 100%;

position: fixed;

top: 50%;

left: 50%;

background: rgba(0,0,0,0.8);

z-index: 999;

transform: translate(-50%,-50%);

cursor: pointer;

}

.imgs {

display: block;

margin: 7% auto 0;

transform: scale(0);

transition:all 0.5s;

width: 100%;

height: auto;

max-width: 80%;

}

.pop.act .imgs {

&transform: scale(1.5);

transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}

html代码与js代码：

// 点击图片时显示弹出层

$(document).ready(function() {

$('.cik').click(function() {

const src = $(this).data('src');

$('.pop').fadeIn(200).addClass('act');

$('.imgs').attr('src', src);

});

$('.pop').click(function(e) {

$('.pop').fadeOut(300);

});

});

代码编写完毕后，我们保存并打开页面，能看到页面上此时有两张图片，如上图 (来源于:长沙网站建设)

此时显示的两张图片较小，看不清楚细节部分，而当鼠标点击图片时，页面上会弹出一个黑色的蒙版，在蒙版中心会显示被点击的图片的放大版，这里我们设置的transform: scale为1.5，意思是图片将会放大1.5倍，这样就可以看清楚细节了。也可以将数字填为2，3等，将图片放的更大。

（第一张图的放大效果）

（第二张图的放大效果）

阅读完图片后，代码里也设置了关闭蒙版的方式，在任意地方点击一下就可以将其关闭，重新浏览之前的页面。

以上就是长沙网站建设整理出的制作图片的点击放大效果的方法,希望能对您有所帮助！