html部分:
<div class="main"> <div id="xiaotu" class="xiaotu"> <img src="http://zhangyan520.com/1.jpg" /> <div id="yidong" class="yidong"></div> </div> <div id="datu" class="datu"><img id="img1" src="http://zhangyan520.com/1.jpg" /></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‘; } } }
时间: 2024-11-05 18:45:50