2019独角兽企业重金招聘Python工程师标准>>> 
html部分：
<div class="main"><div id="xiaotu" class="xiaotu"><img src="http://zhangyan520.com/1.jpg" alt="" /><div id="yidong" class="yidong"></div></div><div id="datu" class="datu"><img id="img1" src="http://zhangyan520.com/1.jpg" alt="" /></div><br class="clear" />
</div>css部分：
* { padding:0px; margin:0px;}
.main { margin:50px;}
.xiaotu, .datu { float:left; position:relative;}
.xiaotu img { width:500px;}
.yidong { width:100px; height:100px; background:#333; filter:alpha(opacity=50); opacity:0.5; position:absolute; left:0px; top:0px; display:none;}
.datu { width:320px; height:320px; overflow:hidden; display:none;}
.datu img { position:absolute;}
.clear { height:0px; clear:both;}js部分：
window.onload = function(){var yidong = document.getElementById('yidong');var xiaotu = document.getElementById('xiaotu');var datu = document.getElementById('datu');var img1 = document.getElementById('img1');var mouseX = 0;var mouseY = 0;document.onmousemove = function(e){//获取鼠标当前位置e = e||window.event;mouseX = e.clientX;mouseY = e.clientY;//显示移动的块及大图在规定的范围内，超出范围隐藏if(mouseX>xiaotu.offsetLeft&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth&&mouseY>xiaotu.offsetTop&&mouseY<xiaotu.offsetHeight+xiaotu.offsetTop){yidong.style.display = datu.style.display = 'block';var a = yidong.offsetWidth/2;var b = yidong.offsetHeight/2;if(mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetHeight+xiaotu.offsetTop-b){yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';}else if(mouseX>xiaotu.offsetLeft&&mouseX<xiaotu.offsetLeft+a&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight-b){yidong.style.left = 0;yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';}else if(mouseX>xiaotu.offsetLeft+xiaotu.offsetWidth-a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth&&mouseY>xiaotu.offsetTop+b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight-b){yidong.style.left = xiaotu.offsetWidth - a*2 + 'px';yidong.style.top = mouseY - xiaotu.offsetTop - b + 'px';}else if(mouseY>xiaotu.offsetTop&&mouseY<xiaotu.offsetTop+b&mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a){yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';yidong.style.top = 0;}else if(mouseY>xiaotu.offsetTop+xiaotu.offsetHeight-b&&mouseY<xiaotu.offsetTop+xiaotu.offsetHeight&mouseX>xiaotu.offsetLeft+a&&mouseX<xiaotu.offsetLeft+xiaotu.offsetWidth-a){yidong.style.left = mouseX - xiaotu.offsetLeft - a + 'px';yidong.style.top = xiaotu.offsetHeight - b*2 + 'px';}//改变大图位置var i = img1.offsetWidth/xiaotu.offsetWidth;img1.style.left = -yidong.offsetLeft * i + 'px';img1.style.top = -yidong.offsetTop * i + 'px';}else{yidong.style.display = datu.style.display = 'none';}}
}
