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){
  //獲取鼠標(biāo)當(dāng)前位置
  e = e||window.event;
  mouseX = e.clientX;
  mouseY = e.clientY;
  //顯示移動(dòng)的塊及大圖在規(guī)定的范圍內(nèi)，超出范圍隱藏
  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';
  }
 }
}

 

標(biāo)簽： isp

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。