zoukankan html css js c++ java

JavaScript鼠标经过图片的放大镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片缩放</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
      #minBox{
          border:1px solid #ccc;
          width: 350px;
          height: 350px;
          position: relative;
          top: 50px;
          left: 50px;
      }
      #minBox img{
          position: absolute;
      }
     #smBox{
            display: none;
            position: absolute;
            width:150px;
            height: 150px;
            background-color: yellow;
            opacity: 0.3;
        }
    #maxBox {
      display: none;
            position: absolute;
            overflow: hidden;
            left:500px;
            top:50px;
            width:500px;
            height: 500px;
            border:1px solid #d9d9d9;
        }
        #maxBox img {
            position: absolute;
        }
    </style>
</head>
<body>
     <div id="minBox">
          <img src="img/min.jpg">
          <div id="smBox"></div>
     </div>
     <div id="maxBox">
         <img src="img/max.jpg">
     </div>

     <script type="text/javascript">
       //获取节点

       var minBox =document.getElementById("minBox");
       var smBox = document.getElementById("smBox");
       var maxBox = document.getElementById("maxBox");
       var maxImg = maxBox.children[0];

       //小块鼠标移动事件事件
       minBox.onmousemove = function(){
            var e = e || window.event;
         smBox.style.display = "block";
         maxBox.style.display = "block";
         //计算小块的位置
         //定义
         var sLeft = e.clientX - smBox.offsetWidth/2 -minBox.getBoundingClientRect().left;
         var sTop = e.clientY - smBox.offsetWidth/2 - minBox.getBoundingClientRect().top;
         //判断左右边界，小块距离左边的距离小于0，则意味超界，设置它的left为0;
         //右边边界判断，小块的最大宽度不能>(minBox的视口宽度- 小块本身宽度)，
         if(sLeft<0){
            sLeft= 0;
         }else if(sLeft >minBox.clientWidth- smBox.offsetWidth){
             sLeft = minBox.clientWidth - smBox.offsetWidth;
         }
         //上下边界同理
         if(sTop<0){
             sTop = 0;
         }else if(sTop > minBox.clientHeight - smBox.offsetHeight){
              sTop = minBox.clientHeight - smBox.offsetHeight;
         }

         //鼠标移动、小块跟着移动
         smBox.style.left = sLeft + "px";
         smBox.style.top =  sTop + "px" ;

         //计算小块在minBox移动的比例，大图同比例在maxBox移动;
         //定义设置moveX、moveY 暂存比例 
          var moveX = sLeft/(minBox.clientWidth - smBox.offsetWidth); 
          
          var moveY = sTop/(minBox.clientHeight - smBox.offsetHeight);
          console.log(moveY);

          //大图maxImg移动
          
          maxImg.style.left = - moveX*(maxImg.clientWidth - maxBox.offsetWidth) +"px";
          maxImg.style.top =  - moveY* (maxImg.clientHeight - maxBox.offsetHeight) +"px";
       }
           //移出滑块的时候
    minBox.onmouseleave = function() {
        smBox.style.display = "none";
        maxBox.style.display = "none";
    }
     </script>
</body>
</html>

查看全文

相关阅读:
大话设计模式---单一职责原则
 大话设计模式---策略模式
 计算机网络（二）
计算机网络（一）
栈与队列
 树
 数据库面试题——基本概念
 链表
 【Essential c++】——（三）泛型编程风格
 【转载】学习JAVA WEB的路线

原文地址：https://www.cnblogs.com/CaktyRiven/p/5169332.html