养眼，非常养眼，把图片放大，还想带放大镜看。下面，分享一段代码，点击图片放大的代码，废话少说直接上代码。
<!DOCTYPE>
<html>
<head>
<title>全民博客</title>
</head>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
/* 图片放大 */
.imgview{cursor: zoom-in;}
.imgaiew{position:fixed;width:100%;height:100%;top:0;left:0;text-align:center;z-index: 99999999;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / 63%);}
.imgaiew img{max-width:100%;max-height:100%;display:inline-block;cursor:zoom-out;}
/*动画*/
.aniout{animation:outgptu .6s;}
.anidownin{animation:downgen .6s;}
@keyframes downgen{from{opacity:0;transform:translate3d(0,10%,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes outgptu{from{opacity:1}to{opacity:0}}
</style>
<img src="http://nidecms.com/uploads/alli/20230721/1689891695804184.png" style="width:300px;" class="imgview">
<script type="text/javascript">
$('.imgview').css({cursor:'pointer'}).on('click',function(){
var img = document.createElement('div');
img.className = 'imgaiew';
img.innerHTML = `<img src="${this.src}" class="anidownin">`;
img.onclick = function () {
$(this).addClass('aniout');
setTimeout(function () {
img.remove();
}, 500)
}
document.body.appendChild(img);
});
</script>
</body>
</html>高端、优雅、简约、大气、上档次、还简单、特别的简单，给网站换上，用户体验好，整个网站的气质就不一样了。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）