zoukankan      html  css  js  c++  java
  • js实现放大镜效果

    html部分

    <div id="box">
            <img width="100%" height="100%" src="images/1.png" alt="#">
            <div id="move"></div>
          </div>
            <div id="bimg">
                  <img id="b_bimg" src="images/1.png" alt="#">
            </div>

    css部分

                *{
      margin:0px;
      padding:0px;
    }
    #box{
      width:330px;
      height:330px;
     float: left;
      margin-left:17%;
      position:relative;
    }
    #move{
      background-image:url(images/move.png);
      width:100px;
      height:100px;
      position:absolute;
      left:0px;
      top:0px;
      display:none;
    }
    #bimg{
      width:400px;
      height:400px;
      overflow:hidden;
     float: left;
     margin-left: 20px;
      position: relative;
      display:none;
    }
    #bimg img{
      width:1000px;
      height:1000px;
      position:absolute;
      top:0px;
      left:0px;
    }

    js部分

    function bigimg(){
      var bbox = document.getElementById("box");
      var bmove = document.getElementById("move");
      var bbimg = document.getElementById("bimg");
      var b_bimg = document.getElementById("b_bimg");
      bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
        bbimg.style.display = "block";
        bmove.style.display="block";
      }
      bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
        bbimg.style.display = "none";
        bmove.style.display="none";
      }
      bbox.onmousemove = function(e){//获取鼠标位置
          var e=e=e||window.event;
        var x = e.clientX;//鼠标相对于视口的位置
        var y = e.clientY;
        var t = bbox.offsetTop;//box相对于视口的位置
        var l = bbox.offsetLeft;
        var _left = x - l - bmove.offsetWidth/2;//计算move的位置left值
        var _top = y - t -bmove.offsetHeight/2;//计算move的位置top值
        if(_top<=0){//滑到box的最顶部
          _top = 0;
        }else if(_top>=bbox.offsetHeight-bmove.offsetHeight){//滑到box的最底部
          _top = bbox.offsetHeight-bmove.offsetHeight ;//bbox.offsetHeight-bmove.offsetHeight这是top的最大值
        }
        if(_left<=0){//滑到box的最左边
          _left=0;
       } else if(_left>=bbox.offsetWidth-bmove.offsetWidth){//滑到box的最右边
          _left=bbox.offsetWidth-bmove.offsetWidth ;//bbox.offsetWidth-bmove.offsetWidth这是left的最大值
          }
        bmove.style.top = _top +"px";//设置move的位置
        bmove.style.left = _left + "px";
         var w =b_bimg.offsetWidth/bbox.offsetWidth;//计算移动的比例大图宽除以小图宽
         var h =b_bimg.offsetHeight/bbox.offsetHeight;
        var b_bimg_top = _top*h;//计算大图的位置
        var b_bimg_left = _left*w;
        b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
        b_bimg.style.left = -b_bimg_left + "px";
      }
        
    }
    bigimg()

    效果如下

  • 相关阅读:
    Single Number II
    Pascal's Triangle
    Remove Duplicates from Sorted Array
    Populating Next Right Pointers in Each Node
    Minimum Depth of Binary Tree
    Unique Paths
    Sort Colors
    Swap Nodes in Pairs
    Merge Two Sorted Lists
    Climbing Stairs
  • 原文地址:https://www.cnblogs.com/aSnow/p/8819568.html
Copyright © 2011-2022 走看看