JS放大镜demo

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

Eureka464

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

阅读量115

点赞数

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_70227543/article/details/124870218

版权

思路：

先创建一个box，里面装着上下两个盒子，上面放图片展示和放大镜展示的图片，下面放小图片做tab切换
设置样式，将大图定位在中图左边，overflow：hidden，display:none
设置mask display:none
创建一个构造函数，运用对象的方式，获取标签
先做好tab切换，设置被选中的小图的边框特殊颜色，将小图的图片地址赋值给中图和大图
设置鼠标移动事件，移入大图和mask显示，移出隐藏
mask跟随鼠标移动，var x y l t, 获取鼠标的位置，设置mask的left和top的样式（注意边框的宽度），设定最大最小值
大图的移动距离=mask的移动距离/中图的大小*大图的大小，设置大图的位置

<!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>
</head>
<style>
    .middle {
        width: 400px;
        height: 320px;
        border: 1px solid #000;
        position: relative;
    }

    .middle>img {
        width: 400px;
        height: 320px;
    }

    .mask {
        width: 100px;
        height: 80px;
        background-color: rgba(0, 100, 200, .6);
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        cursor: move;
        ;
    }

    .big {
        width: 400px;
        height: 320px;
        position: absolute;
        left: 105%;
        top: 0;
        overflow: hidden;
        display: none;
    }

    .big img {
        width: 1600px;
        height: 1280px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .small img {
        width: 80px;
        height: 60px;
        margin: 10px 5px;
        border: 3px solid skyblue
    }

    .small img.active {
        border-color: hotpink;
    }
</style>

<body>
    <div class="box">
        <div class="middle">
            <img src="https://img2.baidu.com/it/u=3869777873,1772812474&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500" alt="">
            <div class="mask"></div>
            <div class="big">
                <img src="https://img2.baidu.com/it/u=3869777873,1772812474&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500" alt="">
            </div>
        </div>
        <div class="small">
            <img class="active" src="https://img2.baidu.com/it/u=3869777873,1772812474&fm=253&fmt=auto&app=138&f=JPEG?w=717&h=500.jpeg" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F8694a4c27d1ed21bbe6a380cad6eddc450da3fb3&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655553928&t=c9c3eb9ab5a6ccbf81acf169ade79a57" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F58ce449ef9251c9611c529243f23f3d54de84c274b7f-f18xkw_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655553995&t=a6ecbedf7f8ae66d61ad3cb4966587a7" alt="">
        </div>
    </div>
</body>
<script>
    // 创建构造函数
    function Magnifier(classname) {
        //  获取标签作为属性
        this.box = document.querySelector('.' + classname);
        this.middleBox = this.box.querySelector('.middle')
        this.bigBox = this.box.querySelector('.big')
        this.mask = this.box.querySelector('.mask')
        this.smallImgs = this.box.querySelectorAll('.small img')
        this.middleImg = this.box.querySelector('.middle>img')
        this.bigImg = this.box.querySelector('.big>img')
        //  调用绑定事件方法
        this.bindEvent()
    }
    // 创建事件
    Magnifier.prototype.bindEvent = function () {
        // 小图边框颜色的改变
        for (let a = 0; a < this.smallImgs.length; a++) {
            // 添加点击事件
            this.smallImgs[a].onclick = () => {
                for (var b = 0; b < this.smallImgs.length; b++) {
                    this.smallImgs[b].className = ''
                }
                this.smallImgs[a].className = 'active'
                // 将小盒子的图片地址赋值给中和大盒子
                this.bigImg.src = this.middleImg.src = this.smallImgs[a].src
            }
        }

        // 鼠标移入事件
        this.middleBox.onmouseover = () => {
            // mask和大图盒子出现
            this.mask.style.display = this.bigBox.style.display = 'block'
            // 鼠标移动mask事件
            this.middleBox.onmousemove = () => {
                var x = window.event.pageX
                var y = window.event.pageY
                var l = x - this.mask.offsetWidth / 2 - this.middleBox.offsetLeft - parseInt(
                    getComputedStyle(this.middleBox)['border-left-width'])
                var t = y - this.mask.offsetHeight / 2 - this.middleBox.offsetTop - parseInt(
                    getComputedStyle(this.middleBox)['border-top-width'])
                // 给mask设最大最小值
                if (l < 0) {
                    l = 0
                }
                if (t < 0) {
                    t = 0
                }
                if (l > this.middleBox.clientWidth - this.mask.offsetWidth) {
                    l = this.middleBox.clientWidth - this.mask.offsetWidth
                }
                if (t > this.middleBox.clientHeight - this.mask.offsetHeight) {
                    t = this.middleBox.clientHeight - this.mask.offsetHeight
                }
                this.mask.style.left = l + 'px'
                this.mask.style.top = t + 'px'

                // 大图移动的距离=mask移动的距离/中盒子大小*大图大小
                var bigImgLeft = -this.bigImg.offsetWidth * l / this.middleBox.offsetWidth
                var bigImgTop = -this.bigImg.offsetHeight * t / this.middleBox.offsetHeight
                // 设置大图位置
                this.bigImg.style.left = bigImgLeft + 'px'
                this.bigImg.style.top = bigImgTop + 'px'
            }


        }
        // 鼠标移出事件
        this.middleBox.onmouseout = () => {
            this.mask.style.display = this.bigBox.style.display = 'none'
        }
    }
    var m = new Magnifier('box')
</script>

</html>