淘宝放大镜

最新推荐文章于 2024-08-14 15:45:18 发布

棋炜的小宝贝

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量87

点赞数

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

本文链接：https://blog.csdn.net/XWen_ING/article/details/108648110

版权

淘宝放大镜专栏收录该内容

1 篇文章 0 订阅

订阅专栏

淘宝放大镜

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 2000px;
        }

        .header {
            height: 200px;
            background-color: #ccc;
        }

        .container {
            width: 980px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
        }

        .fdj {
            width: 350px;
            position: relative;
        }

        .fdj .small {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }

        .fdj .small .glass {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 240px;
            height: 240px;
            background-color: rgba(44, 55, 66, .3)
        }

        .fdj .list {
            width: 350px;
            height: 54px;
            display: flex;
            justify-content: space-around;
        }

        .fdj .list li {
            width: 50px;
            height: 50px;
            border: 2px solid transparent;
        }

        .fdj .list li.active {
            border-color: red;
        }

        .big {
            display: none;
            position: absolute;
            left: 110%;
            top: 0;
            width: 540px;
            height: 540px;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="container"></div>
    </div>
    <div class="content">
        <div class="container">
            <div class="fdj">
                <div class="small">
                    <img src="./images/small01.jpg" />
                    <div class="glass"></div>
                </div>
                <ul class="list">
                    <li data-small-img="./images/small01.jpg" data-big-img="./images/big01.jpg" class="active"><img
                            src="./images/icon01.jpg" /></li>
                    <li data-small-img="./images/small02.jpg" data-big-img="./images/big02.jpg"><img
                            src="./images/icon02.jpg" /></li>
                    <li data-small-img="./images/small03.jpg" data-big-img="./images/big03.jpg" class=""><img
                            src="./images/icon03.jpg" /></li>
                </ul>
                <div class="big">
                    <img src="./images/big01.jpg" />
                </div>
            </div>
        </div>
    </div>
    <script src="./FDJ.js"></script>
    <script>
        // 获取元素
        var glass = document.querySelector('.glass');
        var small = document.querySelector('.small');
        var big = document.querySelector(".big");
        var rightImg = document.querySelector(".big img");
        var maxLeft = 0;
        var maxTop = 0;
        var lis = document.querySelectorAll(".list li");
        // small调用querySelector 
        var smallImg = small.querySelector("img");
        console.log(small.clientWidth, glass.clientWidth)
        var r = (110) / (260);
        var obj = FDJ.offset(small);
        
        

        small.onmouseenter = function() {
            glass.style.display = "block";
            big.style.display = "block";
            maxLeft = small.clientWidth - glass.clientWidth;
            maxTop = small.clientHeight - glass.clientHeight;
        }
        // 添加鼠标移动事件
        small.onmousemove = function (e) {
            // 鼠标移动事件
            var x = e.pageX - obj.left - glass.clientWidth / 2;
            var y = e.pageY - obj.top  - glass.clientHeight / 2;
            if (x < 0) {
                x = 0;
            } else if (x > maxLeft) {
                x = maxLeft;
            }
            if (y < 0) {
                y = 0;
            } else if (y > maxTop) {
                y = maxTop;
            }
            // 将x和y设置为镜片的定位值
            glass.style.left =  x + "px";
            glass.style.top = y + "px";
            rightImg.style.left = -x / r + "px";
            rightImg.style.top = -y / r + 'px';
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
        // 循环添加事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function () {
                // 第一件事情 给自己添加active类 其它兄弟去掉active类
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = "";
                }
                this.className = "active";
                // 第二件事情 切换小图的src
                smallImg.src = this.getAttribute("data-small-img");
                // 第三件事情 切换大图的src
                rightImg.src = this.getAttribute("data-big-img");
            }
        }
    </script>
</body>

</html>

封装js代码

var FDJ = {
    offset: function (dom) {
        // 定义两个变量
        var left = 0;
        var top = 0;
        // 第一次不应该把自己的边框算进去 
        left = dom.offsetLeft;
        top = dom.offsetTop;
        // 为了兼容性考虑，IE8要单独处理
        // 检测window.navigator.userAgent这个字符串里面是否包含"MSIE 8" 
        // 如果包含就说明是IE 如果不包含就说明不是IE
        var isIE8 = false;
        if (window.navigator.userAgent.indexOf("MSIE 8") != -1) {
            isIE8 = true;
        }
        // 让自己指向上一层
        dom = dom.offsetParent;
        // 而且因为dom没有直接获取到页面的属性所以只能一层一层的往上找
        while (dom != document.body) {
            // 如果是IE8  不需要加 clientTop clientLeft
            if (isIE8) {
                // 累加每一层的offsetLeft
                left += dom.offsetLeft
                // 累加每一层的offsetTop 
                top += dom.offsetTop
            } else {
                // 累加每一层的offsetLeft 和clientLeft
                left += dom.offsetLeft + dom.clientLeft;
                // 累加每一层的offsetTop 和clientTop
                top += dom.offsetTop + dom.clientTop;
            }
            // 让dom指向上一层
            dom = dom.offsetParent;
        }
        return {
            left: left,
            top: top
        }
    }
}

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝放大镜

淘宝放大镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
复制链接

扫一扫

专栏目录