放大镜
需求:
放大鼠标悬停部分
学习知识点:
- event参数
- offset家族
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示器</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: pink;
}
/*去除图片间隔*/
img {
vertical-align: top;
}
#box {
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
/*让常规图片占满整个box*/
#normal {
width: 100%;
height: 100%;
border: 1px solid #ccc;
position: relative;
}
#normal img {
width: 350px;
height: 350px;
}
#mask {
width: 153px;
height: 153px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
left: 0;
top: 0;
/*鼠标样式为"可移动"*/
cursor: move;
display: none;
}
#detail {
width: 600px;
height: 600px;
border: 1px solid #cccccc;
overflow: hidden;
position: absolute;
left: 360px;
top: 0;
display: none;
background-color: white;
border: 1px solid #cccccc;
}
#detail img {
position: absolute;
left: 0;
top: 0;
}
#list {
margin: 20px 0 0 100px;
}
.selected {
border: 2px solid red;
}
</style>
</head>
<body>
<div id="box">
<div id="normal">
<img src="images/pic001.jpg" alt="">
<span id="mask"></span>
</div>
<div id="detail">
<img src="images/pic01.jpg" alt="">
</div>
</div>
<div id="list">
<img src="images/pic0001.jpg" alt="">
<img src="images/pic0002.jpg" alt="">
<img src="images/pic0003.jpg" alt="">
</div>
<script>
window.onload = function () {
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
//获取要设置动态的标签
var box = $("box");
var normal = $("normal");
var detail = $("detail");
var mask = $("mask");
var big_img = detail.children[0];
var list_img = $("list").children;
//监听鼠标进入常规展示图片
normal.onmouseover = function () {
//显示鼠标悬停区域
mask.style.display = "block";
//显示图片细节区域
detail.style.display = "block";
//监听鼠标移动
normal.onmousemove = function (event) {
//获取监听对象
var event = event || window.event;
//获取鼠标悬停区域最左边界离盒子的x和y值
var pointX = event.clientX - box.offsetLeft - mask.offsetWidth * 0.5;
var pointY = event.clientY - box.offsetTop - mask.offsetHeight * 0.5;
//边界值检测归零
if (pointX < 0) {
pointX = 0;
} else if (pointX >= normal.offsetWidth - mask.offsetWidth) {
pointX = normal.offsetWidth - mask.offsetWidth;
}
if (pointY < 0) {
pointY = 0;
} else if (pointY >= normal.offsetHeight - mask.offsetHeight) {
pointY = normal.offsetHeight - mask.offsetHeight;
}
//让放大镜移动起来
mask.style.left = pointX + "px";
mask.style.top = pointY + "px";
//让细节大图移动起来
//移动比例: normalX / detailX = normal.width / detail.width;
//等价换得: detailX = normalX / (normal.width / detail.width);
big_img.style.left = -pointX / (normal.offsetWidth / detail.offsetWidth) + "px";
big_img.style.top = -pointY / (normal.offsetHeight / detail.offsetHeight) + "px";
}
};
//监听鼠标撤离常规显示图片
normal.onmouseout = function () {
mask.style.display = "none";
detail.style.display = "none";
}
//遍历列表图片
for (var i = 0; i < list_img.length; i++) {
//排他思想
//闭包
(function (i) {
var img = list_img[i];
img.onmouseover = function () {
//遍历一遍,把所有选中效果移除
for (var j = 0; j < list_img.length; j++) {
list_img[j].className = "";
}
//设置选中效果
img.className = "selected";
normal.children[0].src = "images/pic00" + (i + 1) + ".jpg";
big_img.src = "images/pic0" + (i + 1) + ".jpg";
};
})(i);
}
}
</script>
</body>
</html>
网友评论