JavaScript实现图片放大预览效果
作者：火星飞鸟 时间：2023-08-23 02:41:17
代码实现：
<!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>
实现效果：
来源：https://www.cnblogs.com/jacklzx/p/13802259.html
标签：JavaScript,图片,放大
0
投稿猜你喜欢
superLink，让伪链接更有可用性
2009-06-02 12:35:00
django数据库报错解决汇总:django.db.utils.OperationalError 1045,1049,2003
2024-01-28 00:19:57
ASP进阶教程Ⅶ：留言簿设置密码验证
2008-10-13 09:02:00
PHP延迟静态绑定示例分享
2024-06-05 15:42:24
浅谈Webpack多页应用HMR卡住问题
2023-07-20 01:27:12
Python-openCV读RGB通道图实例
2023-01-26 12:28:26
python新手练习实例之万年历
2021-01-29 02:20:35
pandas时间序列之如何将int转换成datetime格式
2023-03-09 07:50:34
mssql2005注入方法小结
2024-01-16 15:12:11
Vue实现数据请求拦截
2024-05-05 09:24:11
深入了解Hybrid App技术的相关知识
2023-08-10 09:36:02
MYSQL教程:索引和查询优化程序
2009-02-27 15:52:00
python3下pygame如何实现显示中文
2021-01-15 00:57:04
vue中控制mock在开发环境使用,在生产环境禁用方式
2024-05-21 10:15:06
从学习到接单赚钱 十大网络技术人员推荐收藏的网站
2023-02-05 02:54:24
mysql sock文件存储了什么信息
2024-01-14 11:16:43
JavaScript也谈内存优化
2024-02-25 16:33:17
PyQt5 QThread倒计时功能的实现代码
2021-08-02 06:00:28
Flask框架利用Echarts实现绘制图形
2023-01-08 11:52:42
python实现通讯录管理系统
2022-01-31 08:25:31