js 放大镜单张图片

最新推荐文章于 2023-08-30 23:12:02 发布

人生海海丶

最新推荐文章于 2023-08-30 23:12:02 发布

阅读量223

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/stayreal_OA/article/details/99329771

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            margin: 100px;
            border: 1px solid red;
            position: relative;
        }

        /*big的宽度为400，但是big下的img宽度为800，设置了big的overflow为hidden，所以图片只看到一部分*/
        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
            border:1px solid red;
        }
        /*遮盖层，鼠标移上去的时候显示的黄色小块*/
        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>
    <script>
        window.onload = function(){
            var box = document.getElementById('box');
            var small = document.getElementsByClassName('small')[0];
            var small_img = small.getElementsByTagName('img')[0];
            var mask = document.getElementsByClassName('mask')[0];
            var big = document.getElementsByClassName('big')[0];
            var big_img = big.getElementsByTagName('img')[0];
            // 给small添加mousehover，mouseout事件
            // onmouseenter不支持冒泡事件，所以不用onmouseover
            small.onmouseenter = function(){
                mask.style.display="block";
                big.style.display="block";
            }
            small.onmouseleave = function(){
                mask.style.display="none";
                big.style.display="none";
            }
            small.onmousemove = function(){
                // 获取鼠标相对small的top和left
                var mouseX = event.pageX - box.offsetLeft;
                var mouseY = event.pageY - box.offsetTop;
                // 获取小黄块相对small的位置
                var maskX = mouseX - mask.offsetWidth/2;
                var maskY = mouseY - mask.offsetHeight/2;
                // 控制小黄块在small内
                var maskXmax = small.offsetWidth-mask.offsetWidth;
                var maskYmax = small.offsetHeight-mask.offsetHeight;
                if(maskX<0){
                    maskX = 0;
                }
                if(maskY<0){
                    maskY = 0;
                }
                if(maskX>maskXmax){
                    maskX = maskXmax;
                }
                if(maskY>maskYmax){
                    maskY = maskYmax;
                }
                mask.style.left= maskX+"px";
                mask.style.top= maskY+"px";

                // 根据小图比例 控制大图位置
                // mask移动的距离 / mask最大能够移动的距离  = 大图片移动的距离 / 大图片最大能够移动的距离
                var bigX = maskX / maskXmax * (big_img.offsetWidth-big.offsetWidth);
                var bigY = maskY / maskYmax * (big_img.offsetHeight-big.offsetHeight);
                big_img.style.top= -bigY+"px";
                big_img.style.left= -bigX+"px";

            }


        }
    	
    </script>
</head>
<body>
    <div class="box" id="box">
        <div class="small">
            <img src="small.jpg" width="350" alt=""/>
            <div class="mask"></div>
        </div>
        <div class="big">
            <img src="big.jpg" width="800" alt=""/>
        </div>
    </div>
</body>

<script>
    
</script>
</html>

人生海海丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 放大镜单张图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> ...
复制链接

扫一扫