C3+H5小案例 | 01京东放大镜效果

最新推荐文章于 2023-05-08 18:19:24 发布

是zhi胖头鱼

最新推荐文章于 2023-05-08 18:19:24 发布

阅读量231

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45028519/article/details/125277385

版权

源码：

<!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>
    <style>
        .product{
            width: 350px;
            height: 350px;
            margin: 100px;
            position: relative;
            border: 1px solid #000;
            float: left;
        }
        .follow{
            width: 150px;
            height: 150px;
            background-color: #daa520;
            opacity: 0.6;
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }
        .bigpic{
            width: 350px;
            height: 350px;
            float: left;
            background: url(./../images/fangdajing/datu.jpg) no-repeat;
            position: absolute;
            left: 500px;
            top: 110px;
            display: none;
        }
    </style>
    <script src="./../js/jquery.js"></script>
    <script>
        $(document).ready(function(){
            var x = 0;
            var y = 0;

            //鼠标经过控制显示和隐藏
            $(".product").hover(function(){
                $(this).children(".follow").toggle();
                $(this).siblings(".bigpic").toggle();
            });

            $(".product").mousemove(function(event){
                //当前盒子event.pageX 减去 offset().left
                //width()/2:光标居中
                x = event.pageX-$(this).offset().left-$(".follow").width()/2;
                y = event.pageY-$(this).offset().top-$(".follow").height()/2;
                //判断 光标范围不能超过盒子
                // 200为盒子宽度减去光标大小宽度
                if(x < 0){
                    x = 0;
                }else if(x>200){
                    x=200
                }
                if(y < 0){
                    y = 0;
                }else if(y>200){
                    y=200
                }

                $(this).children(".follow").css({"left":x,"top":y});

                //放大效果 大图和小图的倍数
                var bigpicX = -x*(800/350);
                var bigpicY = -y*(800/350);
                $(this).siblings(".bigpic").css("background-position",bigpicX+"px "+bigpicY+"px")
            })
        })
    </script>
</head>
<body>
    <div class="product">
        <img src="./../images/fangdajing/xiaotu.jpg" alt="">
        <div class="follow"></div>
    </div>
    <div class="bigpic"></div>
</body>
</html>