淘宝放大镜
<!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>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.header {
height: 200px;
background-color: #ccc;
}
.container {
width: 980px;
margin: 0 auto;
}
ul {
list-style: none;
}
.fdj {
width: 350px;
position: relative;
}
.fdj .small {
width: 350px;
height: 350px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.fdj .small .glass {
display: none;
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 240px;
background-color: rgba(44, 55, 66, .3)
}
.fdj .list {
width: 350px;
height: 54px;
display: flex;
justify-content: space-around;
}
.fdj .list li {
width: 50px;
height: 50px;
border: 2px solid transparent;
}
.fdj .list li.active {
border-color: red;
}
.big {
display: none;
position: absolute;
left: 110%;
top: 0;
width: 540px;
height: 540px;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="header">
<div class="container"></div>
</div>
<div class="content">
<div class="container">
<div class="fdj">
<div class="small">
<img src="./images/small01.jpg" />
<div class="glass"></div>
</div>
<ul class="list">
<li data-small-img="./images/small01.jpg" data-big-img="./images/big01.jpg" class="active"><img
src="./images/icon01.jpg" /></li>
<li data-small-img="./images/small02.jpg" data-big-img="./images/big02.jpg"><img
src="./images/icon02.jpg" /></li>
<li data-small-img="./images/small03.jpg" data-big-img="./images/big03.jpg" class=""><img
src="./images/icon03.jpg" /></li>
</ul>
<div class="big">
<img src="./images/big01.jpg" />
</div>
</div>
</div>
</div>
<script src="./FDJ.js"></script>
<script>
// 获取元素
var glass = document.querySelector('.glass');
var small = document.querySelector('.small');
var big = document.querySelector(".big");
var rightImg = document.querySelector(".big img");
var maxLeft = 0;
var maxTop = 0;
var lis = document.querySelectorAll(".list li");
// small调用querySelector
var smallImg = small.querySelector("img");
console.log(small.clientWidth, glass.clientWidth)
var r = (110) / (260);
var obj = FDJ.offset(small);
small.onmouseenter = function() {
glass.style.display = "block";
big.style.display = "block";
maxLeft = small.clientWidth - glass.clientWidth;
maxTop = small.clientHeight - glass.clientHeight;
}
// 添加鼠标移动事件
small.onmousemove = function (e) {
// 鼠标移动事件
var x = e.pageX - obj.left - glass.clientWidth / 2;
var y = e.pageY - obj.top - glass.clientHeight / 2;
if (x < 0) {
x = 0;
} else if (x > maxLeft) {
x = maxLeft;
}
if (y < 0) {
y = 0;
} else if (y > maxTop) {
y = maxTop;
}
// 将x和y设置为镜片的定位值
glass.style.left = x + "px";
glass.style.top = y + "px";
rightImg.style.left = -x / r + "px";
rightImg.style.top = -y / r + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
}
// 循环添加事件
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseenter = function () {
// 第一件事情 给自己添加active类 其它兄弟去掉active类
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
}
this.className = "active";
// 第二件事情 切换小图的src
smallImg.src = this.getAttribute("data-small-img");
// 第三件事情 切换大图的src
rightImg.src = this.getAttribute("data-big-img");
}
}
</script>
</body>
</html>
封装js代码
var FDJ = {
offset: function (dom) {
// 定义两个变量
var left = 0;
var top = 0;
// 第一次不应该把自己的边框算进去
left = dom.offsetLeft;
top = dom.offsetTop;
// 为了兼容性考虑,IE8要单独处理
// 检测window.navigator.userAgent这个字符串里面是否包含"MSIE 8"
// 如果包含就说明是IE 如果不包含就说明不是IE
var isIE8 = false;
if (window.navigator.userAgent.indexOf("MSIE 8") != -1) {
isIE8 = true;
}
// 让自己指向上一层
dom = dom.offsetParent;
// 而且因为dom没有直接获取到页面的属性所以只能一层一层的往上找
while (dom != document.body) {
// 如果是IE8 不需要加 clientTop clientLeft
if (isIE8) {
// 累加每一层的offsetLeft
left += dom.offsetLeft
// 累加每一层的offsetTop
top += dom.offsetTop
} else {
// 累加每一层的offsetLeft 和clientLeft
left += dom.offsetLeft + dom.clientLeft;
// 累加每一层的offsetTop 和clientTop
top += dom.offsetTop + dom.clientTop;
}
// 让dom指向上一层
dom = dom.offsetParent;
}
return {
left: left,
top: top
}
}
}