<!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>
交互效果
时间： 2025-01-20 21:49:59