web使用BOM对象实现放大镜

最新推荐文章于 2025-12-18 10:37:20 发布

原创最新推荐文章于 2025-12-18 10:37:20 发布 · 264 阅读

CC 4.0 BY-SA版权

文章标签：


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>商品放大镜</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        #smallBox {
            position: relative;
            z-index: 1;
            width: 350px;
            height: 350px;
            margin: 50px;
            border: 1px solid #ccc;
        }
        
        #zoom {
            display:none ;
            width: 150px;
            height: 150px;
            position: absolute;
            background: #ffddcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        
        #bigBox {
            display: none;
            position: absolute;
            top: 0;
            left: 350px;
            width: 540px;
            height: 540px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
        }
        
        #bigBox img {
            position: absolute;
            z-index: 5
        }
    </style>
</head>

<body>
    <div id="smallBox">
        <div id="zoom"></div>
        <img src="images/01.jpg" />
    </div>
    <div id="bigBox">
        <img src="images/001.jpg" />
    </div>
    <script type="text/javascript">
      var smallBox=document.getElementById("smallBox")
      var zoom=document.getElementById("zoom")
      var bigBoximg=document.querySelector("img")
      var bigbox=document.getElementById("bigBox")
      
      //鼠标移入事件
      smallBox.onmouseover=function(){
        zoom.style.display="block";
        bigbox.style.display="block"
      }
      //鼠标移出事件
      smallBox.onmouseout=function(){
        zoom.style.display="none";
        bigbox.style.display="none"
      }
      //鼠标持续移动
      smallBox.onmousemove=function(e){
          var event=event||window.event
          //获取鼠标指针在小图的位置
          var boxX=event.pageX-smallBox.offsetLeft
          var boxY=event.pageY-smallBox.offsetTop
          //放大镜的坐标
          var zoomx=boxX-zoom.offsetWidth/2;
          var zoomy=boxY-zoom.offsetTop/2;
      
          //设置边界
          if(zoomx<0)zoomx=0
          else if(zoomx>smallBox.offsetWidth-zoom.offsetWidth) zoomx=smallBox.offsetWidth-zoom.offsetWidth
          if(zoomy<0) zoomy=0
          else if(zoomy>smallBox.offsetHeight-zoom.offsetHeight) zoomy=smallBox.offsetHeight-zoom.offsetHeight
          
        //设置放大镜的位置
          zoom.style.left=zoomx+"px"
          zoom.style.top=zoomy+"px"
         
        //设置大图移动
        var bigMove=bigBoximg.offsetWidth-bigbox.offsetWidth;//大图移动距离
        var zoomMove=smallBox.offsetWidth-zoom.offsetWidth;//放大镜移动距离
        var rate=bigMove/zoomMove;
        
        bigBoximg.style.left=-rate*zoomx+"px"
        bigBoximg.style.top=-rate*zoomy+"px"
        
      }

    </script>
</body>

</html>

最终效果