JS实现放大镜效果

JS实现放大镜效果,供大家参考,具体内容如下

鼠标移到图片上就可以放大一块区域

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #small{
        width: 700px;
        height: 340px;
        position: absolute;
        left: 70px;
        top: 100px;
      }
      #small img{
        width: 100%;
        height: 100%;
      }
      #mark{
        width: 200px;
        height: 200px;
        background-color:white;
        position: absolute;
        opacity: 0.5;
        filter: alpha(opacity=50);
        left: 0px;
        top: 0px;
        display: none;
      }
      #big{
        width: 400px;
        height: 400px;
        border: 1px solid black;
        left: 800px;
        top: 100px;
        position: absolute;
        overflow: hidden;
        display: none;
      }
      #big img{
        width: 1400px;
        height: 680px;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
    <script>
      window.onload = function(){
        var oSmall = document.getElementById("small");
        var oBig = document.getElementById("big");
        var oMark = document.getElementById("mark");
        var oBigImg = oBig.getElementsByTagName("img")[0];

        oSmall.onmouseover = function(){
          oMark.style.display = "block";
          oBig.style.display = "block";
        }
        oSmall.onmouseout = function(){
          oMark.style.display = "none";
          oBig.style.display = "none";
        }
        oSmall.onmousemove = function(ev){
          var e = ev || window.event;
          var l = e.clientX - oSmall.offsetLeft - 100;
          if(l <= 0){
            l = 0;
          }
          if(l >= (700-200)){
            l = 500;
          }
          var t = e.clientY - oSmall.offsetTop - 100;
          if(t <= 0){
            t = 0;
          }
          if(t >= (340-200)){
            t = 140;
          }
          oMark.style.left = l + 'px';
          oMark.style.top = t + 'px';

          /* 右边图片移动方向与左边图片方向相反且成倍数移动 */
          oBigImg.style.left = l * -2 + 'px';
          oBigImg.style.top = t * -2 + 'px';

        }
      }
    </script>
  </head>
  <body>
    <div id="small">
      <img src="http://www.cppcns.com/wangluo/javascript/地狱之门卫士 加里奥.jpg" alt="怎么回事">
      <div id="mark"></div>
    </div>
    <div id="big">
      <img src="http://www.cppcns.com/wangluo/javascript/地狱之门卫士 加里奥.jpg" alt="怎么回事">
    </div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

JS实现放大镜效果

扫一扫手机访问