回复
放大镜制作 原创
深处莫神
发布于 2022-8-11 17:29
浏览
0收藏
放大镜
思路:1.大图小图都放入同样大小的盒子,通过鼠标移动到small小图身上去调整box蓝色盒子的位置。
2.同时让big大图盒子从display=none变成block显示状态。
3.让大图片的位置距离上边和左边的进行移动,此时移动的位置大小是按照大小图的比值*移动位置
4.需要设置避免蓝色box溢出!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#small {
width: 576px;
height: 324px;
position: absolute;
left: 10px;
top: 50px;
}
#box {
width: 172px;
height: 97px;
background: #87B3D6;
opacity: 0;
position: absolute;
left: 0;
top: 0;
cursor: crosshair;
}
#big {
width: 576px;
height: 324px;
position: absolute;
left: 620px;
top: 50px;
overflow: hidden;
display: none;
}
</style>
</head>
<body>
<div id="small">
<!-- 小图 -->
<img src="./smallimage.jpg" />
<!-- 盒子 -->
<div id="box"></div>
</div>
<!-- 大图的div -->
<div id="big">
<img src="./bigimage.jpg" id="img" style="position: absolute;left:0;top:0;" />
</div>
</body>
</html>
<script>
//获取元素
//元素绑定事件
//放大图片的效果
//不要让盒子溢出
var small = document.getElementById('small')
var big = document.getElementById('big')
var box = document.getElementById('box')
var img = document.getElementById('img')
//触发一次 onmousemove
small.onmousemove = function (e) {
//盒子显示
box.style.opacity = '0.5'
// 大图显示
big.style.display = 'block'
//放大镜逻辑
//e.clientX,Y 当前鼠标的坐标点
//e.offsetLeft offsetTop margin-left margin-top
// console.log(e.clientX)
// console.log(e.clientY)
// console.log(small.offsetLeft) //margin-left
// console.log(small.offsetTop) //margin-top
//赋予一个新的坐标位置
var x = e.clientX - small.offsetLeft - 86
var y = e.clientY - small.offsetTop - 48.5
//判断是否有溢出
// 水平方向
if (x <= 0) {
x = 0
} else if (x >= 404) {
// 576(small) - 172(box) = 404
x = 404
}
// 垂直方向
if (y <= 0) {
y = 0
} else if (y >= 227) {
// 324px - 97px = 227px
y = 227
}
box.style.left = `${x}px`
box.style.top = `${y}px`
//大图
// 小图:576*324
// 大图:1920*1080
// 大图/小图(比率关系) 1920/576=3.33(比率关系)
//代表 小图身上移动1px 大图身上移动3.3px
// 10/3 = 3.33
//核心原理 主要就是要知道大图和小图的比率关系
img.style.left = `-${x * (10 / 3)}px`
img.style.top = `-${y * (10 / 3)}px`
}
small.onmouseleave = function () {
box.style.opacity = '0'
big.style.display = 'none'
}
</script>
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2022-8-11 17:33:46修改
赞
收藏
回复
相关推荐