js图片放大镜

JS图片放大镜效果。
应用场景：各大电商网站。
js图片放大镜
(附件)
<!--
Author: XiaoWen
Create a file: 2017-01-13 12:28:36
Last modified: 2017-01-13 17:16:46
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      height: 280px;
      width: 480px;
      background: url(small.jpg) no-repeat;
      float:left;
    }
    #rec{
      height: 100px;
      width: 100px;
      opacity:.5;
      background: #ccc;
      position: absolute;
      left: 0;
      top: 0;
      display:none;
    }
    #box1{
      height: 400px;
      width: 400px;
      background: url(big.jpg) no-repeat;
      float:left;
      display: none;
    }
  </style>
</head>
<body>
<div id="box">
  <div id="rec"></div>
</div>
<div id="box1"></div>
</body>
<script>
  box.onmouseover=function(){
    rec.style.display='block';
    box1.style.display='block';
  }
  box.onmousemove=function(ev){
    var e=ev||event;
    // var ex=e.clientX; //鼠标位置不在中间
    // ex=e.clientX-rec.offsetWidth/2; //鼠标位置在中间
    var ex=e.clientX-rec.offsetWidth/2;
    var ey=e.clientY-rec.offsetHeight/2;

    //让小方块不超出左边
    if(ex<box.offsetLeft){
      ex=box.offsetLeft
    }
    //让小方块不超出右边
    if(ex>box.offsetLeft+box.offsetWidth-rec.offsetWidth){ //让小方块不超出左边
      ex=box.offsetLeft+box.offsetWidth-rec.offsetWidth
    }
    //让小方块不超出上边
    if(ey<box.offsetTop){
      ey=box.offsetTop
    }
    //让小方块不超出下边
    if(ey>box.offsetTop+box.offsetHeight-rec.offsetHeight){
      ey=box.offsetTop+box.offsetHeight-rec.offsetHeight
    }
    rec.style.left=ex+'px';
    rec.style.top=ey+'px';
    box1.style.backgroundPositionX=-4*ex+'px'
    box1.style.backgroundPositionY=-4*ey+'px'

  }
  box.onmouseout=function(){
    rec.style.display='none';
    box1.style.display='none';
  }

</script>
</html>
相关推荐
