<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.div1, .div2 {
width: 430px;
height: 430px;
float: left;
cursor:crosshair;
}
.div1 img{
width: 430px;
height: 430px;
}
.div2{
position: relative;
overflow: hidden;
display: none;
margin-left: 10px;
}
.div2 img{
width: 800px;
height: 800px;
position: absolute;
}
.div3, .div4, .div5, .div6 {
width: 60px;
height: 60px;
float: left;
margin-left: 33px;
}
#small img:hover{
cursor: pointer;
border: 3px solid #21bbca;
}
#div1-1{
width: 230px;
height: 230px;
border: 1px solid red;
position: absolute;
background-image: url("21_03.png");
top: 0;
left: 0;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<div>
<div id="big" style="overflow: hidden;">
<div class="div1">
<img id="bimg" src="imgA_2.jpg" alt=""/>
<div id="div1-1"></div>
</div>
<div class="div2"><img id="rig" src="imgA_3.jpg" alt=""/></div>
</div>
<div id="small" >
<div class="div3"><img src="imgA_1.jpg" alt=""/></div>
<div class="div4"><img src="imgB_1.jpg" alt=""/></div>
<div class="div5"><img src="imgC_1.jpg" alt=""/></div>
<div class="div6"><img src="imgD_1.jpg" alt=""/></div>
</div>
</div>
样式效果
<script>
function getChildNodes(b){
var arr=[];
for(var i=0;i< b.childNodes.length;i++){
if(!(b.childNodes[i].nodeType ==3 && b.childNodes[i].nodeValue.trim() =="")){
arr.push(b.childNodes[i]);
}
}
return arr;
}
var small =getChildNodes(document.getElementById("small"));
var big = getChildNodes(document.getElementById("big"));
var rig=document.getElementById("rig");
var bimg = document.getElementById("bimg");
var divnie=document.getElementById("div1-1");
var arr = ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg", "imgD_2.jpg"];
var brr = ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg", "imgD_3.jpg"];
for(var i=0;i<arr.length;i++){
!function(i){
small[i].onmouseover=function(){
bimg.src=arr[i];
rig.src=brr[i];
}
}(i);
}
function move(ev){
ev = ev || window.event;
var ox = ev.clientX-divnie.offsetWidth/2;
var oy = ev.clientY-divnie.offsetHeight/2;
if(ox<0){ox=0;}
else if(ox>big[0].offsetWidth-divnie.offsetWidth){
ox=big[0].offsetWidth-divnie.offsetWidth;}
if(oy<0){oy=0;}
else if(oy>big[0].offsetWidth-divnie.offsetWidth){
oy=big[0].offsetHeight-divnie.offsetHeight;}
divnie.style.left = ox+"px";
divnie.style.top = oy+"px";
console.log(divnie.style.left);
var bei = big[1].clientWidth/divnie.clientWidth;
rig.style.left =-bei*ox+"px";
rig.style.top =-bei*oy+"px";
}
//隐藏放大镜移动
big[0].onmousemove=move;
big[0].onmouseover=function(){
//隐藏图片显示
//隐藏放大镜显示
big[1].style.display="block";
divnie.style.display="block";
move();
};
//鼠标移除显示
big[0].onmouseout=function(){
big[1].style.display="none";
divnie.style.display="none";
};
</script>
交互效果
