作业(放大镜案例)

最新推荐文章于 2023-03-21 14:03:43 发布

前端小王*

最新推荐文章于 2023-03-21 14:03:43 发布

阅读量188

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_48493160/article/details/109995668

版权

js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

拖拽放大镜

<!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: 10000px;
        }

        .zoom {
            border: 1px solid #ccc;
            width: 350px;
            height: 350px;
            position: absolute;
            top: 345px;
            left: 116px;
        }

        .zoom .small {
            width: 100%;
            height: 100%;
        }

        .zoom .small img {
            width: 100%;
            height: 100%;
        }

        .zoom .small .glass {
            position: absolute;
            top: 0;
            left: 0;
            width: 153px;
            height: 153px;
            background-color: rgba(36, 201, 98, .5);
        }

        .big {
            position: absolute;
            left: 110%;
            top: 0;
            width: 350px;
            height: 350px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

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

<body>
    <div id="zoom" class="zoom">
        <div class="small" id="small">
            <img src="./images/111.bmp">
            <div class="glass" id="glass"></div>
        </div>
        <div class="big" id="big">
            <img id="bigImg" src="./images/222.bmp">
        </div>
    </div>
    <script>
        // 获取元素
        var glass = document.getElementById("glass");
        var small = document.getElementById("small");
        var bigImg = document.getElementById("bigImg");
        var r = 350 / 800;
        // 鼠标按下事件
        glass.onmousedown = function (e) {
            // 获取元素现在的 定位值
            var left = glass.offsetLeft;
            var top = glass.offsetTop;

            // 鼠标位置
            var mouseX = e.clientX;
            var mouseY = e.clientY;

            // 添加鼠标移动事件
            document.onmousemove = function (e) {
                // 获取鼠标移动后的位置
                var movedX = e.clientX;
                var movedY = e.clientY;

                var resultX = movedX - mouseX + left;
                var resultY = movedY - mouseY + top;

                if (resultX < 0) {
                    resultX = 0;
                } else if (resultX > small.offsetWidth - glass.offsetWidth) {
                    resultX = small.offsetWidth - glass.offsetWidth;
                }

                if (resultY < 0) {
                    resultY = 0;
                } else if (resultY > small.offsetHeight - glass.offsetHeight) {
                    resultY = small.offsetHeight - glass.offsetHeight
                }

                glass.style.left = resultX + "px";
                glass.style.top = resultY + "px";

                bigImg.style.left = -resultX / r + 'px'
                bigImg.style.top = -resultY / r + 'px'
            }
        }


        document.onmouseup = function () {
            document.onmousemove = null;
        }

        document.onselectstart = function () {
            return false;
        }

        // H5中新增的事件   
        document.ondragstart = function() {
            return false;
        }


    </script>
</body>

</html>

淘宝放大镜

<!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: 10000px;
        }

        .zoom {
            border: 1px solid #ccc;
            width: 350px;
            height: 350px;
            position: absolute;
            top: 345px;
            left: 116px;
        }

        .zoom .small {
            width: 100%;
            height: 100%;
        }

        .zoom .small img {
            width: 100%;
            height: 100%;
        }

        .zoom .small .glass {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 153px;
            height: 153px;
            background-color: rgba(36, 201, 98, .5);
        }

        .big {
            position: absolute;
            left: 110%;
            top: 0;
            width: 350px;
            height: 350px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

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

<body>
    <div id="zoom" class="zoom">
        <div class="small" id="small">
            <img src="./images/111.bmp">
            <div class="glass" id="glass"></div>
        </div>
        <div class="big" id="big">
            <img id="bigImg" src="./images/222.bmp">
        </div>
    </div>
    <script src="blueBag.js"></script>
    <script>
        // 获取元素
        var glass = document.getElementById("glass");
        var small = document.getElementById("small");
        var bigImg = document.getElementById("bigImg");
        var r = 350 / 800;
        var big = document.getElementById("big")
        //获取对象
        var obj = blueBag.offset(small); // {left: 100, top: 200}

        // big隐藏
        big.style.display = "none";
        // glass隐藏
        glass.style.display = "none"

        small.onmouseenter = function () {
            big.style.display = "block";
            glass.style.display = "block"
        }

        small.onmouseleave = function () {
            big.style.display = "none";
            glass.style.display = "none"
        }
        small.onmousemove = function (e) {
            // 获取鼠标在页面中的位置
            var pageX = e.pageX;
            var pageY = e.pageY;

            var x = pageX - obj.left - glass.clientWidth / 2;
            var y = pageY - obj.top - glass.clientHeight / 2;
            if (x < 0) {
                x = 0;
            } else if (x >= small.clientWidth - glass.clientWidth) {
                x = small.clientWidth - glass.clientWidth;
            }
            if (y < 0) {
                y = 0;
            } else if (y >= small.clientHeight - glass.clientHeight) {
                y = small.clientHeight - glass.clientHeight;
            }

            glass.style.left = x + "px";
            glass.style.top = y + "px";

            bigImg.style.left = -x / r + 'px'
            bigImg.style.top = -y / r + 'px'
        }
    </script>
</body>

</html>

blueBag js文件

var blueBag = {
    // 求随机整数 [start - end]
    rand: function (start, end) {
        return parseInt(Math.random() * (end - start + 1)) + start;
    },

    // 求m的n次方
    pow: function (m, n) {
        var shuzi = 1;
        for (var i = 0; i < n; i++) {
            shuzi *= m;
        }

        return shuzi
    },

    // 求num的阶乘
    jc: function (num) {
        if (num === 1) {
            return 1;
        }
        return num * jc(num - 1);
    },
    // 获取计算后样式
    getCss: function (dom, cssProperty) {
        if (window.getComputedStyle) {
            var cssObj = getComputedStyle(dom);
            return cssObj[cssProperty]
        } else {
            var cssObj = dom.currentStyle;
            return cssObj[cssProperty]
        }
    },
    bindEvent: function (dom, type, fun) {
        if (dom.addEventListener) {
            dom.addEventListener(type, fun, false);
        } else if (dom.attachEvent) {
            dom.attachEvent("on" + type, fun);
        } else {
            dom["on" + type] = fun
        }
    },
    offset: function(dom) {
        // 定义一个对象
        var obj = {
            left: dom.offsetLeft,
            top: dom.offsetTop
        }
        dom = dom.offsetParent;
        // 循环
        while (dom != document.body) {
            obj.left += dom.offsetLeft +dom.clientLeft;
            obj.top += dom.offsetTop + dom.clientTop;
            dom = dom.offsetParent;
        }
        return obj;
    }

}

前端小王*

关注

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> * {
复制链接

扫一扫