<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04放大镜</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
img {
vertical-align: top;
}
.out {
width: 260px;
margin: 40px 0 0 100px;
border: 2px solid gold;
position: relative;
}
/*单张图片部分*/
#singleDiv {
position: relative;
}
.imgDiv {
}
#small {
width: 100%;
}
/*遮罩*/
#mask {
width: 100px;
height: 100px;
background: rgba(254, 237, 100, 0.6);
position: absolute;
left: 0;
top: 0;
/*隐藏*/
display: none;
}
/*轮播图部分*/
.winDiv {
height: 195px;
margin-top: 10px;
overflow: hidden;
position: relative;
}
#conDiv {
width: 780px;
position: absolute;
left: 0;
top: 0;
font-size: 0;
}
#conDiv img {
width: 130px;
}
#left, #right {
width: 30px;
position: absolute;
top: 0;
bottom: 0;
background: rgba(222, 10, 100, 0.5);
font-size: 28px;
text-align: center;
line-height: 195px;
color: white;
}
#left {
left: 0;
}
#right {
right: 0;
}
/*大图部分*/
.bigDiv {
width: 200px;
height: 200px;
position: absolute;
right: -210px;
top: 0;
overflow: hidden;
display: none;
}
#big {
position: absolute;
}
</style>
</head>
<body>
<div class="out">
<!--单张"大图"部分-->
<div id="singleDiv">
<!--图片-->
<div class="imgDiv">
<img src="img/1.jpg" alt="" id="small" />
</div>
<!--遮罩-->
<div id="mask"></div>
</div>
<!--手动轮播图部分-->
<div class="winDiv">
<!--所有的图片-->
<div id="conDiv">
<!--img[src=img/$.jpg]*6-->
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</div>
<!--左边按钮-->
<div id="left"><</div>
<!--右边按钮-->
<div id="right">></div>
</div>
<!--放大区域-->
<div class="bigDiv">
<img src="img/1.jpg" alt="" id="big" />
</div>
</div>
</body>
<script type="text/javascript">
// 获取页面元素
var singDiv = document.getElementById("singleDiv");
var maskDiv = document.getElementById("mask");
var bigDiv = document.querySelector(".bigDiv");
var bigImg = document.getElementById("big");
/*
* 一, 放大镜部分
*/
// 鼠标移入事件
singDiv.onmouseenter = function() {
maskDiv.style.display = "block";
bigDiv.style.display = "block";
// 计算比例
var scaleX = (bigDiv.offsetWidth - bigImg.offsetWidth) / (singDiv.offsetWidth - maskDiv.offsetWidth);
var scaleY = (bigDiv.offsetHeight - bigImg.offsetHeight) / (singDiv.offsetHeight - maskDiv.offsetHeight);
document.onmousemove = function(event) {
var even = event || window.event;
/*
* 一, 修改 maskDiv 的 left, top
*/
var x = even.clientX;
var y = even.clientY;
// var leftX = singDiv.offsetParent.offsetLeft;
// var topY = singDiv.offsetParent.offsetTop;
var leftX = pageLeft(singDiv);
var topY = pageTop(singDiv);
var width = maskDiv.offsetWidth;
var height = maskDiv.offsetHeight;
// 计算
var maskLeft = x - leftX - width / 2;
var maskTop = y - topY - height / 2;
// 边界限制
// 水平方向
if (maskLeft >= singDiv.offsetWidth - maskDiv.offsetWidth) {
maskLeft = singDiv.offsetWidth - maskDiv.offsetWidth;
}
if (maskLeft <= 0) {
maskLeft = 0;
}
// 垂直方向
if (maskTop >= singDiv.offsetHeight - maskDiv.offsetHeight) {
maskTop = singDiv.offsetHeight - maskDiv.offsetHeight;
}
if (maskTop <= 0) {
maskTop = 0;
}
// 赋值
maskDiv.style.left = maskLeft + "px";
maskDiv.style.top = maskTop + "px";
/*
* 二, 修改 bigImg 的 left, top
*/
bigImg.style.left = maskLeft * scaleX + "px";
bigImg.style.top = maskTop * scaleY + "px";
}
}
// 鼠标移出事件
singDiv.onmouseleave = function() {
maskDiv.style.display = "none";
bigDiv.style.display = "none";
}
// 元素到页面左边的距离
function pageLeft(ele) {
var left = ele.offsetLeft;
if (ele.offsetParent == null) {
return left;
} else{
return left + pageLeft(ele.offsetParent);
}
}
// 元素到页面顶端的距离
function pageTop(ele) {
var top = ele.offsetTop;
if (ele.offsetParent == null) {
return top;
} else{
return top + pageTop(ele.offsetParent);
}
}
/*
* 二, 轮播图部分
*/
var conDiv = document.getElementById("conDiv");
var leftBtn = document.getElementById("left");
var rightBtn = document.getElementById("right");
var imgs = conDiv.getElementsByTagName("img");
var smallImg = document.getElementById("small");
/*
* 1, leftBtn 关联点击事件
*/
leftBtn.onclick = function() {
// 在 原 left 值的基础上 增加 130, conDiv 往右走
var left = conDiv.offsetLeft + 130;
// 边界控制
if (left >= 0) {
left = 0;
}
conDiv.style.left = left + "px";
}
/*
* 2, rightBtn 关联点击事件
*/
rightBtn.onclick = function() {
// 在 原 left 值的基础上 减少 130, conDiv 往左走
var left = conDiv.offsetLeft - 130;
// 边界控制
if (left <= singDiv.offsetWidth - conDiv.scrollWidth) {
left = singDiv.offsetWidth - conDiv.scrollWidth;
}
conDiv.style.left = left + "px";
}
/*
* 3, img 关联鼠标移入事件
*/
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseenter = function() {
// 修改 smallImg 图片
smallImg.src = this.getAttribute("src");// 亦可使用 this.src
// 修改 bigImg 图片
bigImg.src = this.src;
// 修改 当前 图片的 class
for (var j = 0; j < imgs.length; j++) {
if (this == imgs[j]) {
imgs[j].className = "select";
} else{
imgs[j].className = "";
}
}
}
}
</script>
</html>