<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
#all{
width: 350px;
height: 360px;
margin:100px 0 0 100px;
position: relative;
}
#small{
width: 350px;
height: 350px;
border:1px solid #ccc;
position: relative;
}
span{
width: 100px;
height: 100px;
background: rgba(255,255,0,.4);
position: absolute;
display: none;
}
#small img{
width: 350px;
height: 350px;
}
#big{
width: 600px;
height: 600px;
border:1px solid #ccc;
position: absolute;
left:360px;
top:0;
display: none;
overflow: hidden;
}
#big img{
position: absolute;
}
#list{
margin:10px 0 0 100px;
}
#list img{
margin:4px;
}
</style>
</head>
<body>
<div id="all">
<div id="small">
<span></span>
</div>
<div id="big">
</div>
</div>
<div id="list">
</div>
<script>
window.onload = function () {
var allBox = document.getElementById('all');
var smallBox = allBox.children[0];
var bigBox = allBox.children[1];
var maskSpan = smallBox.children[0];
var big_img = bigBox.children[0];
var list_imgs = document.getElementById('list').children;
smallBox.onmouseover= function () {
maskSpan.style.display="block";
bigBox.style.display="block";
smallBox.onmousemove=function (event) {
var event=event||document.event;
var sDistX=event.clientX-smallBox.offsetParent.offsetLeft-maskSpan.offsetWidth*0.5;
var sDistY=event.clientY-smallBox.offsetParent
.offsetTop-maskSpan.offsetHeight*0.5;
if(sDistX<0){
sDistX=0;
}else if(sDistX>smallBox.offsetWidth-maskSpan.offsetWidth){
sDistX=smallBox.offsetWidth-maskSpan.offsetWidth-2
}
if(sDistY<0){
sDistY=0;
}else if (sDistY>smallBox.offsetHeight-maskSpan.offsetHeight){
sDistY=smallBox.offsetHeight-maskSpan.offsetHeight-2
}
var bigX=-sDistX/(smallBox.offsetWidth/bigBox.offsetWidth);
var bigY=-sDistY/(smallBox.offsetHeight/bigBox.offsetHeight);
maskSpan.style.left=sDistX+"px";
maskSpan.style.top=sDistY+"px";
big_img.style.left=bigX+"px";
big_img.style.top=bigY+"px";
}
smallBox.onmouseout= function () {
maskSpan.style.display="none";
bigBox.style.display="none";
}
for(var i=0;i<list_imgs.length;i++){
list_imgs[i].index=i;
list_imgs[i].onclick= function () {
smallBox.children[1].src="images/pic00"+(this.index+1)+".jpg";
big_img.src='images/pic0'+(this.index+1)+'.jpg';
}
}
}
}
</script>
</body>
</html>
网友评论