京东淘宝的图片放大镜功能

最新推荐文章于 2023-01-14 23:34:00 发布

第一千行代码

最新推荐文章于 2023-01-14 23:34:00 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/y75475/article/details/69640907

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 100px;
            position: relative;
        }
        .big{
            width: 450px;
            height: 450px;
            border: 1px solid #ccc;
            position: absolute;
            top: 0;
            left: 350px;
            overflow: hidden;
            display: none;
        }
        .mask{
            width: 200px;
            height: 200px;
            background: rgba(235,235,0,0.4);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            cursor: move;
        }
        .samll{
            position: relative;
        }
        .big img{
            /*transform: translate(10px,50px);*/
            /*position: absolute;*/
            left: 0px;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="samll">
        <img src="./images/001.jpg" alt="">
        <div class="mask"></div>
    </div>
    <div class="big">
        <img src="./images/0001.jpg" alt="">
    </div>
</div>
<script>
    //实现效果：
    //鼠标放到小图片上面的时候，后面的大盒子出现。鼠标离开的时候大盒子隐藏。
    //鼠标移动的时候，大盒子内的大图片也移动。
    var small = document.getElementsByClassName('samll')[0];
    var big = document.getElementsByClassName('big')[0];
    var mask = document.getElementsByClassName('mask')[0];
    var box = document.getElementsByClassName('box')[0];
    var img = big.children[0];
    big.style.display = 'none';//事件发生之前，后面的大盒子先隐藏起来
    small.onmouseover = function () {
        big.style.display = 'block';//鼠标放上的时候，大盒子出现;
        mask.style.display = 'block';//与鼠标同步的放大镜也同时出现;
    }
    small.onmouseout = function () {//鼠标离开的时候，与上面的效果反之。
        big.style.display = 'none';
        mask.style.display = 'none';
    }
        small.onmousemove = function () {//鼠标移动事件
//            如果mask的到父元素左边的值大于 其父元素的宽度减去放大镜的宽度。就都等于父元素的宽度-mask的宽度。
            //放大镜的横坐标的值 等于当前鼠标的横坐标值减去box到其父元素左边（即浏览器）减去放大镜宽度的一半，鼠标始终保持在放大镜的中央。
            mask.style.left = event.clientX-box.offsetLeft-mask.offsetWidth/2+'px';
            //纵坐标，与上同理。
            mask.style.top = event.clientY-box.offsetTop-mask.offsetHeight/2+'px';
            img.style.left = 500+'px';
            //防止放大镜溢出 小图片盒子
            //放大镜到父元素的左边的距离 如果大于 小图片盒子的宽度 减去放大镜的宽度 即表示放大镜溢出
            // 则令其等于 小图片盒子的宽度 减去放大镜的宽度
            if(mask.offsetLeft>small.offsetWidth-mask.offsetWidth){
                mask.style.left = (small.offsetWidth-mask.offsetWidth)+'px';
                //放大镜的Left的值如果为负，就为零
            }else if(mask.offsetLeft<=0){
                mask.style.left = 0+'px';
                //纵坐标 与上同理
            }if(mask.offsetTop>small.offsetHeight-mask.offsetHeight){
                mask.style.top = (small.offsetHeight-mask.offsetHeight)+'px';
            }else if(mask.offsetTop<=0){
                mask.style.top = 0+'px';
            }
            //移动时 大图片移动的距离 应是 鼠标移动距离 放大镜到父元素的距离乘以大图片宽高除以小图片宽高
            var numX = big.offsetWidth/box.offsetWidth;
            var numY = big.offsetHeight/box.offsetHeight;
//            alert(beinum);
            img.style.transform = "translateX("+-mask.offsetLeft*numX+"px"+")"
                    +"translateY("+-mask.offsetTop*numY+"px"+")";
        }

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

第一千行代码

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
京东淘宝的图片放大镜功能

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 3
复制链接

扫一扫