放大镜

最新推荐文章于 2024-10-01 18:51:18 发布

nh^O^

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量54

点赞数

分类专栏：放大镜文章标签： javascript css

本文链接：https://blog.csdn.net/NIHAOHAOHOA/article/details/115214800

版权

放大镜专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个关于网页中图像缩放和定位交互的实现示例。通过JavaScript和CSS，当鼠标移入图像所在的盒子时，会出现一个可移动的红色选区，并同步调整大图的显示位置，以实现局部放大效果。当鼠标移出时，选区和大图隐藏。该代码片段主要涉及HTML布局、CSS样式和JavaScript事件处理。

摘要由CSDN通过智能技术生成

<!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>
        *{
            padding:0px;
            margin:0px;
        }
        #box{
            width:430px;
            height:430px;
            margin:100px;
            position:relative;
        }
        #smallImage{
            width:100%;
            height:100%;
        }
        #move{
            width:220px;
            height:220px;
            border:1px solid red;
            position: absolute;
            top:0px;
            left:0px;
            display: none;
        }
        #bimg{
            width:430px;
            height:430px;
            border:1px solid red;
            position:absolute;
            left:450px;
            top:0px;
            overflow: hidden; 
            display: none;
        }
        #b_bimg{
            width: 880px;
            height:880px;
            position: absolute;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="img01.jpg" id="smallImage">
        <div id="move"></div>
        <div id="bimg">
            <img src="img01.jpg" alt="" id="b_bimg">
        </div>
    </div>
    <script>
        var box = document.getElementById('box');
        var move = document.getElementById('move');
        var bimg = document.getElementById('bimg');
        var b_bimg = document.getElementById('b_bimg');
        //鼠标移入
        box.onmouseover = function(){
            //红框出现
            move.style = "display:block";
            bimg.style = "display:block";
        }
        //鼠标移动
        box.onmousemove = function(event){
            //解决鼠标兼容性
            var e = event || window.event
            // 事件发生时  相对于 视窗 的 Y 轴的距离
            var y = e.clientY;
            var x = e.clientX;
           // console.log(y,x)
            // offsetLeft  相对于左边的偏移值
            var t = box.offsetLeft;
            var l = box.offsetTop;
          //  console.log(t,l)
            var left = x-t-(move.offsetWidth)/2;
            var top = y-l-(move.offsetHeight)/2;
            if(top<=0){
                top = 0;
            }else if(top>=box.offsetHeight-move.offsetHeight){
                top = box.offsetHeight-move.offsetHeight
            }
            if(left<=0){
                left = 0;
            }else if(left>=box.offsetWidth-move.offsetWidth){
                left = box.offsetWidth-move.offsetWidth
            }
            move.style.left = left+'px';
            move.style.top = top+'px';
            // console.log(top,'top')
            // 计算比率
            // 鼠标移动的距离 占 可移动距离  的 比例
            var w =  left/(box.offsetWidth-move.offsetWidth);
            var h = top/(box.offsetHeight-move.offsetHeight);
            console.log(w,h,'比率')
            var b_left = w*(b_bimg.offsetWidth-bimg.offsetWidth);
            var b_top = h*(b_bimg.offsetHeight-bimg.offsetHeight);
            b_bimg.style.left = -b_left+'px';
            b_bimg.style.top = -b_top+'px'
        }
        //鼠标移出
        box.onmouseout = function(){
            move.style = "display:none";
            bimg.style = "display:none"
        }
    </script>
</body>
</html>