图片放大镜效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38622264/article/details/71178275

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
   #bujv{width:171px;height:256px;position:relative;border:1px #000000 solid;padding:10px;}
   #smallbox{width:171px;height:256px;position:relative;}
   #smallbox #mod{width:100%;height:100%;background: #ff0;opacity:0;position:absolute;z-index: 5;display:block;}
   #smallbox #float1{width:50px;height:50px;background: #5F5C5C;opacity:0.5;position:absolute;z-index: 1;display:none}
   #bujv #bigbox{width:185px;height:270px;left:245px;top:0;position: absolute;display: none;overflow: hidden;}
   #bigImg{position:absolute;}
</style>
<script>
   window.onload = function(){
       var bujv = document.getElementById("bujv");
       var smallbox = document.getElementById("smallbox");
       var mod = document.getElementById("mod");
       var float1 = document.getElementById("float1");
       var bigbox = document.getElementById("bigbox");
       var bigImg = document.getElementById("bigImg");
       // ｍｏｄ移入移出事件
       mod.onmouseover = function(){
           float1.style.display = "block";
           bigbox.style.display = "block";
           }
       mod.onmouseout = function(){
           float1.style.display = "none";
           bigbox.style.display = "none";
           }
       //　ｍｏｄ移动事件
       mod.onmousemove = function(evt){
           var e = evt || window.event //事件兼容写法
           // 使鼠标到滑块的中心位置
           var fleft = e.clientX - bujv.offsetLeft - mod.offsetLeft - float1.offsetWidth/2;
           var ftop = e.clientY - bujv.offsetTop - mod.offsetTop - float1.offsetHeight/2;
           // 设置边界
           if (fleft < 0){ //左边界
               fleft = 0 ;
           }else if(fleft > mod.offsetWidth - float1.offsetWidth){ //右边界
               fleft = mod.offsetWidth - float1.offsetWidth;
           }
           if (ftop < 0){ //上边界
               ftop = 0 ;
           }else if(ftop > mod.offsetHeight - float1.offsetHeight){ // 下边界
               ftop = mod.offsetHeight - float1.offsetHeight;
           }
           // 滑块跟随鼠标移动（实质是改变滑块的left和top值）
           float1.style.left = fleft + "px";
           float1.style.top = ftop + "px";
           //设置比例滑块在mod中的移动范围
           var bileX = fleft / (mod.offsetWidth - float1.offsetWidth);
           var bileY = ftop / (mod.offsetHeight - float1.offsetHeight);
           // 大图能移动的范围（比例乘以大图与大盒子的差）
           bigImg.style.left = - bileX * (bigImg.offsetWidth - bigbox.offsetWidth) + "px";
            bigImg.style.top = - bileY * (bigImg.offsetHeight - bigbox.offsetHeight) + "px";
       }
   }
</script>
</head>
<body>
   <div id="bujv">
       <div id="smallbox">
           <span id="mod"></span>
           <div id="float1"></div>
           <img src="small.jpg">
       </div>
       <div id="bigbox"><img src="big.jpg" id="bigImg"></div>
   </div>
</body>
</html>