放大镜效果

游鹄君2025年4月30日大约 2 分钟
示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜效果</title>
  <style type="text/css">
    *{margin:0px;padding:0px;}
    #left {width:400px;height:400px;background:white;position:absolute;left:50px;top:50px;}
    #right{width:400px;height:400px;background:white;position:absolute;left:480px;top:50px;overflow:hidden;overflow:hidden;display:none;}
    #box{width:150px;height:150px;background:white;opacity:0.5;position:absolute;display:none;}
    #uls{width:auto;height:auto;background:white;position:absolute;left:50px;top:470px;}
    #uls li{width:80px;height:80px;float:left;margin-right:5px;background:white;list-style:none;}
    #bigimg {position:absolute;}
  </style>
</head>
<body>
  <!-- 进行页面布局 -->
  <div id='left'><img src="" alt=""><div id='box'></div><img src="./fdj02/1.jpg" id='smallimg' width='100%' alt=""></div>
  <div id='right'><img src="./fdj02/1.jpg" id='bigimg' alt=""></div>
  <ul id='uls'>
    <li><img src="./fdj02/1.jpg" width='100%' alt=""></li>
    <li><img src="./fdj02/2.jpg" width='100%' alt=""></li>
    <li><img src="./fdj02/3.png" width='100%' alt=""></li>
    <li><img src="./fdj02/4.png" width='100%' alt=""></li>
  </ul>
 
  <script type="text/javascript">
  //获取所需元素
  var left=document.getElementById('left');
  var right=document.getElementById('right');
  var box=document.getElementById('box');
  var bigimg=document.getElementById('bigimg');
  var smallimg=document.getElementById('smallimg');
 
  //鼠标移入事件
  left.onmouseover=function(e)
  {
    //改变小手样式
    box.style.cursor='move';
    box.style.display='block';
    right.style.display='block';
    //获取鼠标坐标
    //更改获取方式(因为受到分页文档影响)
    /*var x=e.clientX;
    var y=e.clientY;*/
    var x=e.pageX;
    var y=e.pageY;
 
    //获取left偏移量
    var lx=left.offsetLeft;
    var lt=left.offsetTop;
 
    //获取盒子长宽的一半
    var bw=box.offsetWidth/2;
    var bh=box.offsetHeight/2;
 
    //获取盒子偏移量
    var bl=x-lx-bw;
    var bt=y-lt-bh;
 
    //限定移动边界
    var maxl=left.offsetWidth-box.offsetWidth;
    var maxt=left.offsetHeight-box.offsetHeight;
 
    //限定宽
    if(bl<0)
    {
     bl=0;
    }
    if(bl>maxl)
    {
     bl=maxl;
    }
    //限定高
    if(bt<0)
    {
     bt=0;
    }
    if(bt>maxt)
    {
     bt=maxt;
    }
 
    //移动盒子
    box.style.left=bl+'px';
    box.style.top=bt+'px';
 
    //导入图片,让大图跟随移动
    //获取大图移动偏移量
    var bimgl=bl/left.offsetWidth*bigimg.offsetWidth;
    var bimgt=bt/left.offsetHeight*bigimg.offsetHeight;
 
    //移动大图 注意这里取值正好相反 
    bigimg.style.left=-bimgl+'px';
    bigimg.style.top=-bimgt+'px';
    
    
  }
 
  </script>
 
  <script type="text/javascript">
  //鼠标移出事件
  window.onmouseout=function()
  {
    box.style.display="none";
    right.style.display="none";
  }
  </script>
  <script type="text/javascript">
  //获取uls的img元素
  var imgs=document.getElementById('uls').getElementsByTagName('img');
  for (var i = 0; i < imgs.length; i++) {
    imgs[i].onmouseover=function()
    {
     //获取图片src值
     var srcs=this.getAttribute('src');
 
     //更换小图和大图的路径
     bigimg.src=srcs;
     smallimg.src=srcs;
    }
  };
  </script>
  
 
</body>
</html>