前端新手练习-淘宝放大镜效果

最新推荐文章于 2025-08-09 13:28:03 发布

原创最新推荐文章于 2025-08-09 13:28:03 发布 · 444 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#淘宝放大镜效果 #新手前端 #js

本文是前端新手的实践分享，通过JavaScript实现淘宝商品页面常见的放大镜效果。利用鼠标位置动态调整放大镜及大图背景的位置，尽管存在不足，但详细介绍了基本思路和技术要点。

淘宝放大镜效果

前端刚开始学的菜鸟，写的一个淘宝放大镜效果
不足点应该很多。

利用获取鼠标位置来改变放大镜和大盒子的背景图位置来实现效果；
注意大盒子背景图在移动时要要移动负值；

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        /* 小盒子样式 */
        .little{ 
            position: relative;
            width: 100px;
            height: 100px;
            margin: 50px 0 0 50px;
            background-image: url(./img/small.jpg);
            background-size: 100px 100px;
            float: left;
            cursor: move;
        }
        /* 放大盒子的样式 */
        .big{
            width: 200px;
            height: 200px;
            background-image: url(./img/big.jpg);
            background-size: 800px 800px; 
            background-repeat: no-repeat;
            
            margin-top:50px;
            margin-left: 100px;
            float: left;
        }
        /* 清浮动 */
        .clear{
            clear: both;
        }
        /* 放大镜样式 */
        .cover{
            width: 25px;
            height: 25px;
            background-color: rgba(218, 19, 19, 0.3);
            position: absolute;
            top:0;
        }
    </style>
</head>
<body>
    <div class="little">
        <div class="cover"></div>
    </div>
    <div class="big"></div>
    <div class="clear"></div>
    

    <script>
        var oSmall = document.getElementsByTagName("div")[0];
        var oBig = document.getElementsByTagName("div")[2];
        var oCover = oSmall.getElementsByTagName("div")[0];

        oSmall.onmouseover = function(){
            window.onmousemove = function(ev){
            var ev = window.event||ev;
            //放大镜随鼠标位置移动（鼠标X方向位置 - 左margin值 -放大镜宽的一半）
            oCover.style.left = (ev.clientX-50-12.5) +"px"; 
            //放大镜随鼠标位置移动（鼠标Y方向位置 - 上margin值 -放大镜宽的一半）
            oCover.style.top = (ev.clientY-50-12.5) +"px";
            //注意下面两个是负值
            //放大盒背景图随鼠标位置移动    -（鼠标X方向位置 - 左margin值 -放大镜宽的一半）* 大盒子与放大镜的比例
            oBig.style.backgroundPositionX = -(ev.clientX-50-12.5)*8 +"px";
            //放大盒背景图随鼠标位置移动    -（鼠标Y方向位置 - 上margin值 -放大镜宽的一半）* 大盒子与放大镜的比例
            oBig.style.backgroundPositionY = -(ev.clientY-50-12.5)*8 +"px";


             //放大镜到盒子地边后 不在移动 ;
            if((ev.clientX-50-12.5)>=75){   
                oCover.style.left = "75px";
                oBig.style.backgroundPositionX = "-600px";
            }
            else if((ev.clientX-50-12.5)<=0){
                oCover.style.left =  "0px";
                oBig.style.backgroundPositionX = "0px";
            }
            if((ev.clientY-50-12.5)>=75){
                oCover.style.top = "75px";
                oBig.style.backgroundPositionY ="-600px";
            }
            else if((ev.clientY-50-12.5)<=0){
                oCover.style.top = "0px";
                oBig.style.backgroundPositionY ="0px";

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