原生JS实现放大镜功能....
程序员文章站
2024-03-17 11:11:10
...
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09放大镜</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 350px;
height: 350px;
border: 1px solid #000;
margin: 200px;
position: relative;
}
#big{
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: hidden;
position: absolute;
top:0;
left : 360px;
display: none;
}
#mask{
width: 175px;
height: 175px;
background: paleturquoise;
position: absolute;
left:0;
top: 0;
opacity: 0.3;
display: none;
cursor: move;
}
#small{
position: relative;
}
#bigImg{
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div id="box" >
<div id="small"><!-- 小盒子:350*350 -->
<img src="001.jpg" alt="" /><!-- 小图片:350*350 -->
<div id="mask"></div><!-- 遮罩成:175*175 -->
</div>
<div id="big"><!-- 大盒子:400*400 -->
<img src="0001.jpg" alt="" id="bigImg"/><!-- 大图片:800*800 -->
</div>
</div>
</body>
<script src="../public0.1.1.js"></script>
<script>
/*
需求分析:
1 鼠标移入small盒子，mask会显示，big盒子会显示
2 鼠标移出small盒子，mask会隐藏，big会隐藏
3 鼠标在small盒子中移动
4 mask会跟随鼠标移动，鼠标在mask的中间
5 big盒子里面显示bigImg的对应部分
*/
// 获取相关元素
var smallBox = document.getElementById('small');//small盒子
var bigBox = document.getElementById('big');//big盒子
var bigImg = document.getElementById('bigImg');//大图片
var mask = document.getElementById('mask');//mask遮罩层
var box = smallBox.parentNode;
// 1 鼠标移入small盒子
smallBox.onmouseenter = function(){
// mask会显示，big盒子会显示
mask.style.display = "block";
bigBox.style.display = "block";
}
// 2 鼠标移出small盒子
smallBox.onmouseleave = function(){
// mask会隐藏，big会隐藏
mask.style.display = "none";
bigBox.style.display = "none";
}
// 3 鼠标在small盒子中移动
smallBox.onmousemove = function(e){
e = e||window.event;
// 4 mask会跟随鼠标移动,mask是相对small定位
// 要计算鼠标距离small的上和左的距离
var left = e.clientX + getScroll().left - box.offsetLeft - 1;
var top = e.clientY + getScroll().top - box.offsetTop - 1;
// 鼠标在mask的中间
left = left - mask.offsetWidth/2;
top = top - mask.offsetHeight/2;
// 边界检查
if(left<0){
left = 0
}
if(left>smallBox.offsetWidth - mask.offsetWidth){
left=smallBox.offsetWidth - mask.offsetWidth
}
if(top<0){
top=0
}
if(top>smallBox.offsetHeight-mask.offsetHeight){
top=smallBox.offsetHeight-mask.offsetHeight
}
mask.style.left = left+"px";
mask.style.top = top+"px";
// 5 big盒子里面显示bigImg的对应部分
// 水平方向：left占小盒子宽度的多少，bigImg就从哪里开始显示
bigImg.style.left = -left/smallBox.offsetWidth*bigImg.offsetWidth + "px";
// 垂直方向：top占小盒子宽度的多少，bigImg就从哪里开始显示
bigImg.style.top = -top/smallBox.offsetHeight*bigImg.offsetHeight + "px";
}
</script>
</html>
上一篇： java中实现十六进制和十进制之间的转换
下一篇： 原生js实现放大镜特效