原生JS实现放大镜特效
分享一个用原生JS实现的放大镜效果，效果如下：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JS实现放大镜特效</title>
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
/*不设背景和透明度在IE中无法识别*/
background-color: #fff;
/*IE透明度的写法*/
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
//页面加载完毕后执行
window.onload = function () {
//获取放大镜容器
var objDemo = document.getElementById("demo");
//获取小图片容器
var objSmallBox = document.getElementById("small-box");
//获取遮罩层
var objMark = document.getElementById("mark");
//获取放大镜
var objFloatBox = document.getElementById("float-box");
//获取图片放大区域
var objBigBox = document.getElementById("big-box");
//获取大图片(比图片放大区域大)
var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
//鼠标进入遮罩层时
objMark.onmouseover = function () {
//放大镜容器样式显示为块
objFloatBox.style.display = "block"
//大图片容器样式显示为块
objBigBox.style.display = "block"
}
//鼠标离开遮罩层时
objMark.onmouseout = function () {
//放大镜容器不显示
objFloatBox.style.display = "none"
//大图片容器不显示s
objBigBox.style.display = "none"
}
//鼠标在遮罩层上移动时
objMark.onmousemove = function (ev) {
//对事件做兼容(IE)
var _event = ev || window.event;
//放大镜的中心left值等于鼠标的x值减
//最外层容器的left值,再减
//小图片容器的left值,再减
//放大镜自身宽度的一半
var left = _event.clientX -
objDemo.offsetLeft -
objSmallBox.offsetLeft -
objFloatBox.offsetWidth / 2;
//放大镜的中心top值等于鼠标的y值减
//最外层容器的top值,再减
//小图片容器的top值,再减
//放大镜自身高度的一半
var top = _event.clientY -
objDemo.offsetTop -
objSmallBox.offsetTop -
objFloatBox.offsetHeight / 2;
//如果放大镜相对于小图片容器的left小于0时
if (left < 0) {
//将left值改为0(防止左边出去)
left = 0;
//否则如果放大镜相对于小图片容器的left大于容器宽度减于放大镜宽度
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
//将left值改为容器宽度减于放大镜宽度(防止右边出去)
left = objMark.offsetWidth - objFloatBox.offsetWidth;
};
//如果放大镜相对于小图片容器的top小于0时
if (top < 0) {
//将top值改为0(防止上边出去)
top = 0;
//否则如果放大镜相对于小图片容器的top大于容器高度减去放大镜高度
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
//将top值改为容器高度减于放大镜高度(防止下边出去)
top = objMark.offsetHeight - objFloatBox.offsetHeight;
};
//设置放大镜的left值
objFloatBox.style.left = left + "px";
//设置放大镜的top值
objFloatBox.style.top = top + "px";
//求出放大镜的left占小图片容器减去放大镜宽度的差,得出一个比值
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
//求出放大镜的top占小图片容器减去放大镜高度的差,得出一个比值
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//设置大图片的left值
//用比值percentX乘以大图片宽度减去放大区域的差，取反赋给大图片的left值
objBigBoxImage.style.left = -percentX *
(objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
//设置大图片的top值
//用比值percentY乘以大图片高度减去放大区域的差，取反赋给大图片的top值
objBigBoxImage.style.top = -percentY *
(objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
}
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<!-- mark为遮罩层，防止在IE中跳动,与小图片容器大小一样大-->
<div id="mark"></div>
<div id="float-box"></div>
<!-- 预览的小图 -->
<img src="images/0.jpg" />
</div>
<div id="big-box">
<!-- 放大镜里的大图，与小图等比例 -->
<img src="images/1.jpg" />
</div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/07/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
