JS案例--放大镜

最新推荐文章于 2024-09-15 19:46:31 发布

码农不秃呀

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量93

点赞数

文章标签： java 前端 html

本文链接：https://blog.csdn.net/weixin_53271010/article/details/126591646

版权

  *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .shop{
            float: left;
            width: 300px;
            height: 300px;
            background-image: url(https://img1.baidu.com/it/u=2003496092,3295249130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313);
            border: 1px solid gray;
            background-size: 100% 100%;
            position: relative;
            margin-left: 200px;
        }
        .slider{
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: cyan;
            opacity: .5;
            display: none;

        }
        .mirror{
            width: 400px;
            height: 400px;
            border: 1px solid gray;
            float: left;
            overflow: hidden;
            position: relative;
            display: none;
        }
        .mirror img{
            width: 800px;
            height: 800px;
            position: absolute;

        }
    </style>
</head>
<body>
    <div class="shop">
        <div class="slider"></div>
    </div>
    <div class="mirror">
        <img src="https://img1.baidu.com/it/u=2003496092,3295249130&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313" alt="">
    </div>
</body>
<script>
  var dShop = document.getElementsByClassName("shop")[0];
  var dSlider = document.getElementsByClassName("slider")[0];
  var dMirror = document.getElementsByClassName("mirror")[0];
  var img = document.getElementsByTagName("img")[0]

  dShop.onmouseenter = function(){
    //鼠标移入事件
    dSlider.style.display = "block";
    dMirror.style.display = "block";
  }

  dShop.onmouseleave = function(){
    //鼠标移出事件
    dSlider.style.display = "none";
    dMirror.style.display = "none";
  }

  dShop.onmousemove = function(e){
    //鼠标移动事件
    var x = e.clientX-this.offsetLeft-75;
    var y = e.clientY-this.offsetTop-75;

    //限制边界
     x = (x<0) ? 0 : x;
     x = (x>150) ? 150 : x;
     y = (y<0) ? 0 : y;
     y = (y>150) ? 150 : y;

    dSlider.style.left = x + 'px';
    dSlider.style.top = y + 'px';

    // 让大图片进行等比例的移动 
    var l1 = dSlider.offsetLeft;
    var t1 = dSlider.offsetTop;
    var w1 = 300;
    var w2 = 800;
    var l2 = l1*w2/w1 * -1;
    var t2 = t1*w2/w1 * -1;
    img.style.left = l2 + 'px';
    img.style.top = t2 + 'px';
  }
</script>

效果图