//自己修改图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#blow-up{
820px;
margin: 100px auto;
}
#title{
360px;
height: 360px;
border: 3px solid #ccc;
float: left;
position: relative;
}
img{
display: block;
}
#shank{
200px;
height: 200px;
display: block;
background: #ccc;
opacity: .5;
position: absolute;
top: 0;
left: 0;
display: none;
cursor: move;
}
#big {
440px;
height: 440px;
float: right;
border: 3px solid #ccc;
overflow: hidden;
display: none;
position: relative;
}
#bigImg {
position: absolute;
top: 0;
left: 0;
}
#blow-up #ul{
position: absolute;
top: 55%;
}
#blow-up #ul li{
list-style: none;
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="blow-up">
<div id="title">
<span id="shank"></span>
<img src="img/1.png" width="360" height="360" id="small"/>
</div>
<div id="big">
<img src="img/1.png" width="800" height="800" id="bigImg"/>
</div>
<ul id="ul">
<li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
</div>
<script type="text/javascript">
var oBlow = document.getElementById("blow-up");
var oTitle = document.getElementById("title");
var oShank = document.getElementById("shank");
var oSmall = document.getElementById("small");
var oBig = document.getElementById("big");
var oBigImg = document.getElementById("bigImg");
var oUl = document.getElementById("ul");
var oLi = oUl.getElementsByTagName('li');
var num ;
for (var i=0;i<oLi.length;i++) {
oLi[i].index = i;
oLi[i].onclick = function(){
num = this.index +1;
oSmall.src = 'img/'+num+'.png';
oBigImg.src = 'img/'+num+'.png';
}
}
oTitle.onmouseover = function(){
oShank.style.display = 'block';
oBig.style.display = 'block';
}
oTitle.onmouseout = function(){
oShank.style.display = 'none';
oBig.style.display = 'none';
}
oShank.onmousemove = function(ev){
ev = ev || event;
var bL= oBlow.offsetLeft;
var bT= oBlow.offsetTop;
var sW= oShank.offsetWidth;
var sH= oShank.offsetHeight;
var x = ev.clientX - bL - sW/2;
var y = ev.clientY - bT - sH/2;
var sX = oSmall.offsetWidth -oShank.offsetWidth;
var sY = oSmall.offsetHeight - oShank.offsetHeight;
if(x<0){
x=0;
}else if(x>sX){
x=sX;
};
if( y < 0 ){
y = 0;
}else if( y > sY ){
y = sY;
};
oShank.style.left = x + 'px';
oShank.style.top = y + 'px';
var preX = x / sX;
var preY = y / sY;
oBigImg.style.left = -preX*( oBigImg.offsetWidth - oBig.offsetWidth ) + 'px';
oBigImg.style.top = -preY*( oBigImg.offsetHeight - oBig.offsetHeight ) + 'px';
}
</script>
</body>
</html>