JavaScript实现图片放大预览效果
更新时间：2020年11月02日 11:03:19 作者：火星飞鸟
这篇文章主要介绍了JavaScript实现图片放大预览效果，帮助大家更好的理解和制作JavaScript特效，感兴趣的朋友可以了解下
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.preview-img {
position: relative;
height: 398px;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: skyblue;
opacity: .4;
border: 1px solid #ccc;
cursor: move;
}
.big {
overflow: hidden;
display: none;
position: absolute;
top: 0;
left: 410px;
width: 500px;
height: 500px;
background-color: pink;
z-index: 99;
border: 1px solid #ccc;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<script>
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview-img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
// 显示与隐藏
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
});
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
});
// 盒子跟随鼠标移动
preview_img.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
var maskMax = preview_img.offsetHeight - mask.offsetHeight;
if (maskX <= 0) {
maskX = 0;
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 大图，根据比例计算坐标
var bigImg = document.querySelector('.bigImg');
var bigMax = bigImg.offsetWidth - big.offsetWidth;
var bigX = bigMax * maskX / maskMax;
var bigY = bigMax * maskY / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
});
});
</script>
<div class="preview-img">
<img src="https://s1.ax1x.com/2020/10/12/027yRg.jpg" alt="">
<div class="mask"></div>
<div class="big">
<img src="https://s1.ax1x.com/2020/10/12/0276zQ.jpg" alt="" class="bigImg">
</div>
</div>
</body>
</html>
实现效果：
以上就是JavaScript实现图片放大预览效果的详细内容，更多关于JavaScript 图片放大的资料请关注脚本之家其它相关文章！
相关文章
取变量的Boolean值2008-12-12
这篇文章主要介绍了js中的new Map的用法示例小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
详解ES6数组方法find()、findIndex()的总结
这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
今天小编就为大家分享一篇Bootstrap模态对话框中显示动态内容的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
JavaScript小数在做四则运算时，精度会丢失，这会在项目中引起诸多不便，先请看下面脚本。2009-10-10
这篇文章主要介绍了微信小程序渲染性能调优，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-07-07
这篇文章主要介绍了JavaScript事件委托技术,实例分析了事件委托技术的原理、适用场合及用法实例,需要的朋友可以参考下2015-02-02
网站一般都有访问量统计工具，比较高效实用的工具多种多样，这篇文章主要介绍了javascript精确统计网站访问量实例代码，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要介绍了javascript实现在网页中运行本地程序的方法,实例分析了JavaScript基于ActiveXObject运行本地程序的技巧,需要的朋友可以参考下2016-02-02
最新评论