【放大镜】想知道网上的物体放大是怎么做的吗

最新推荐文章于 2024-08-24 13:47:49 发布

夜星639

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量221

点赞数

文章标签： css html js

本文链接：https://blog.csdn.net/qq_65923595/article/details/122425392

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .small_box{
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 100px 0 0 50px;
            position: relative;
        }
      .small_box .yellow{
          width: 175px;
          height: 175px;
          background-color: rgba(255 , 255 , 0 , 0.3);
          position: absolute;
          left: 0;
          top: 0;
          cursor: move;
          display: none;
      }
      .big_box{
          width: 400px;
          height: 400px;
          border: 1px solid #ccc;
          position: absolute;
          top: 100px;
          left: 410px;
          overflow: hidden;
          display: none;
      }
      .big_img{
          position: absolute;
      }

    </style>
</head>
<body>
    <div class="small_box">
        <img src="001.jpg" alt="" class="small_img">
        <div class="yellow"></div>
    </div>
    <div class="big_box">
        <img src="0001.jpg" alt="" class="big_img">
    </div>
    <script src="28.html"></script>
    <script>
        window.onload = function(){
            var small_box = document.getElementsByClassName("small_box")[0];
            var yellow = document.getElementsByClassName("yellow")[0];
            var big_img = document.getElementsByClassName("big_img")[0];
            var big_box = document.getElementsByClassName("big_box")[0];
            small_box.onmouseover = function(){
                yellow.style.display = "block"
                big_box.style.display = "block"

            }
            small_box.onmouseout = function(){
                yellow.style.display = "none"
                big_box.style.display = "none"
                
            }
            small_box.onmousemove = function(e){
                e = event || window.event;
                var pageX = e.pageX || e.clientX + getScroll().left;
                var pageY = e.pageY || e.clientY + getScroll().top;
                var x = pageX - small_box.offsetLeft - yellow.offsetWidth / 2;
                var y = pageY - small_box.offsetTop - yellow.offsetHeight / 2;
                if(x < 0){
                    x = 0;
                }else if (x > small_box.offsetWidth - yellow.offsetWidth){
                    x = small_box.offsetWidth - yellow.offsetWidth
                }
                if(y < 0){
                    y = 0;
                }else if (y > small_box.offsetWidth - yellow.offsetHeight){
                    y = small_box.offsetWidth - yellow.offsetHeight
                }
                yellow.style.left = x + "px";
                yellow.style.top = y + "px";
                var bl = (big_img.offsetWidth - big_box.offsetWidth)/(small_box.offsetWidth - yellow.offsetWidth);
                big_img.style.left = -x*bl + "px"
                big_img.style.top = -y * bl + "px"

            }
        }
    </script>
</body>
</html>

夜星639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【放大镜】想知道网上的物体放大是怎么做的吗

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫