JS-面向对象放大镜

最新推荐文章于 2022-02-09 21:40:34 发布

weixin_40624809

最新推荐文章于 2022-02-09 21:40:34 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/weixin_40624809/article/details/96694639

版权

本文详细介绍了如何使用JavaScript来实现类似京东购物网站上的商品放大镜效果，通过创建对象和事件监听，达到鼠标悬停时显示放大区域的功能，提升用户体验。

摘要由CSDN通过智能技术生成

仿京东的放大镜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        #box{
            width: 450px;
            height: 450px;
            position: relative;
            border: 1px solid salmon; 

        }
        /* .small{
            width: 450px;
            height: 450px;
        }
        .cover{
            width: 300px;
            height: 300px;
            background: rgba(255,246,143,0.5);
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
        }
        .big{
            width: 540px;
            height: 540px;
            border: 1px solid seagreen;
            overflow: hidden;
            position: absolute;
            left: 480px;
            top: 50px;
        }
        .big img{
            position: absolute;
            left: 0px;
            top: 0px;

        } */
    </style>
</head>
<body>
    <div id="box">
        <!-- <div class="small" id="small">
            <img src="images/11.jpg" alt="">
            <div class="cover" id="cover"></div>
        </div>
        <div class="big" id="big">
            <img src="images/10.jpg" alt="">
        </div> -->
    </div>
    <script>
        // 小div
        (function(){
            function Small(width,height){
                this.width=width|| 450
                this.height=height|| 450
            }
            Small.prototype.init=function(box){
                var small = document.createElement('div')
                var img = document.createElement('img')
                var box = document.getElementById('box')
                // div.id='small'
                img.src = 'images/11.jpg'
                small.style.width = this.width + 'px'
                small.style.height = this.height + 'px'
                // small.style.backgroundColor = 'pink'
                box.append(small)
                small.append(img)
            }
            window.Small = Small
        })();
        

        // 大div
        (function(){
            function Big(width,height) { 
                this.width = width || 540
                this.height = height || 540
            }
            Big.prototype.init = function(box){
                var big = document.createElement('div')
                var img = document.createElement('img')
                var box = document.getElementById('box')
                // div.id='big'
                img.src = 'images/10.jpg'
                img.style.position = 'absolute'
                img.style.left = 0 + 'px'
                img.style.top = 0 + 'px'
                big.style.width = this.width + 'px'
                big.style.height = this.height + 'px'
                big.style.position = 'absolute'
                big.style.border = '1px solid salmon'
                big.style.left = 540 + 'px'
                big.style.top = 50 + 'px'
                big.style.overflow = 'hidden'
                big.style.display = 'none'
                box.append(big)
                big.append(img)
            }
            
            window.Big = Big
        })();
        

        // 遮罩层
        (function(){
            function Cover(width,height){
                this.width=width|| 300
                this.height=height|| 300
            }
            Cover.prototype.init=function(box,small){
                var cover = document.createElement('div')
                var box = document.getElementById('box')
                cover.style.width = this.width + 'px'
                cover.style.height = this.height + 'px'
                cover.style.position = 'absolute'
                cover.style.background = 'rgba(255,246,143,0.5)'
                cover.style.display = 'none'

                cover.style.left = 0 + 'px'
                cover.style.top = 0 + 'px'
                box.children[0].append(cover)
            }
            window.Cover = Cover
        })();
        

        // 初始化
        (function(){
            var small1 = new Small(450,450)
            small1.init();
            var cover1 = new Cover(300,300)
            cover1.init();
            var big1 = new Big(540,540)
            big1.init();
            
            var box = document.getElementById('box')
            var coverBox =  box.children[0].children[1]
            var bigBox = box.children[1]
            var bigImg = box.children[1].children[0]
            var small = box.children[0]

            box.onmouseover = function (cover,big) { 
                coverBox.style.display = 'block'
                bigBox.style.display = 'block'
            }
            box.onmouseout = function (cover,big) { 
                coverBox.style.display = 'none'
                bigBox.style.display = 'none'
                // console.log( box.children[1].children[0])
            }
            box.onmousemove = function(e){
                var e = window.event || e
                var coverPositionX =  e.clientX - 150
                var coverPositionY =  e.clientY - 150 
                if(coverPositionX<=0){
                    coverPositionX = 0
                }
                if(coverPositionX>=150){
                    coverPositionX = 150
                }
                if(coverPositionY<=0){
                    coverPositionY=0
                }
                if(coverPositionY>=150){
                    coverPositionY=150
                }
                coverBox.style.left = coverPositionX +'px'
                coverBox.style.top = coverPositionY +'px'
                //大图的移动
                // 遮罩层的移动距离/图片的移动距离 = 遮罩层的最大移动距离/ 图片的最大移动距离
                var imgMaxDistance =  bigImg.offsetWidth- bigBox.offsetWidth   //258
                var coverMaxDistance = small.offsetWidth - coverBox.offsetWidth   //150

                bigImg.style.left = - imgMaxDistance*coverPositionX /coverMaxDistance + 'px'
                bigImg.style.top = - imgMaxDistance*coverPositionY /coverMaxDistance + 'px'

        }
        })();

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