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
投稿猜你喜欢
制作主页的独门功夫五十招
2010-09-05 21:15:00
IIS+PHP添加对webp格式图像的支持配置方法
2023-05-28 11:20:11
asp代码WinHttp.WinHttpRequest.5.1使用例子
2010-03-11 21:28:00
30个出色的分页设计
2009-05-12 17:49:00
如何避免SQL语句中含有单引号而导致操作失败？
2009-11-07 18:40:00
Pytorch中的Tensorboard与Transforms搭配使用
2023-07-09 08:27:05
WEB移动应用框架构想
2010-09-28 16:26:00
Javascript 中对中文长度对行判断
2009-07-05 18:39:00
可以在线创建文件夹吗？
2009-11-01 18:07:00
CSS样式表中SPAN和DIV的区别
2007-10-21 08:47:00
js 混淆加密工具代码
2007-09-22 18:10:00
mysql使用LOAD语句批量录入数据
2010-03-18 16:19:00
jquery常用的表单操作很全很详细
2011-09-01 19:21:11
ASP网站Server object error的解决办法
2008-11-07 15:57:00
用css实现透视效果
2009-09-05 16:33:00
如何测试字符串的长度？
2009-11-11 20:02:00
如何在ASP中使用SQL存储过程
2008-02-26 12:09:00
定位后无法选择容器内容解决方案
2008-07-28 13:14:00
Shellcode加密解密函数
2009-04-24 11:18:00
asp用正则过滤html标签
2008-01-19 16:34:00