第23天，后三天铺淘宝主页，附录个放大镜代码

19年9月

发布日期: 2019-09-05

阅读次数:

后三天任务：

淘宝首页、列表页、详情页、购物车页、订单页、登录页、注册页
要求一个页面里有两个js特效（轮播，表单验证、选项卡、导航栏等）
所有js、css外联

注释
全部要提取
不能用定位，全用浮动
外边距、内边距
混合布局
用html5和css3写

放大镜的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .img {
            width: 350px;
            height: 350px;
            border: 1px solid #ccc;
            margin: 100px;
            position: relative;
            cursor: move;
        }
        
        .bimg {
            position: relative;
            top: -350px;
            left: 350px;
            border: 1px solid #ccc;
            width: 350px;
            height: 350px;
            overflow: hidden;
            display: none;
        }
        
        #move {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: rgba(8, 152, 202, 0.2);
            top: 0px;
            left: 0px;
            display: none;
        }
        
        .simg {
            width: 350px;
            height: 350px;
        }
        
        .bimg>img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>

</head>

<body>
    <div class="img">
        <div class="simg">
            <!--小图片-->
            <img src="/home/yueyang/图片/lun2.png" style="width:350px;height: 350px;" />
            <div id="move"></div>
            <!--放大区域-->
        </div>
        <div class="bimg">
            <!--大图片-->
            <img src="/home/yueyang/图片/lun1.jpg" style="width:1400px;height: 1400px;" />
        </div>
    </div>


    <script>
        $(document).ready(function() {

            //鼠标移动到图片显示，移除隐藏     
            $(".img").hover(function() {
                $(".bimg").css("display", "block");
                $("#move").css("display", "block");
            }, function() {
                $(".bimg").css("display", "none");
                $("#move").css("display", "none");
            });
            //放大区域移动，大图片移动
            $(".img").mousemove(function(event) {
                var x = event.pageX;
                var y = event.pageY;
                var nx = x - $(".img").offset().left - $("#move").width() / 2;
                var ny = y - $(".img").offset().top - $("#move").height() / 2;
                if (nx < 0) {
                    nx = 0;
                }
                if (nx > $(".img").width() - $("#move").width()) {
                    nx = $(".img").width() - $("#move").width();
                }
                if (ny < 0) {
                    ny = 0;
                }
                if (ny > $(".img").height() - $("#move").height()) {
                    ny = $(".img").height() - $("#move").height();
                }
                $("#move").css({
                    left: nx + "px",
                    top: ny + "px"
                });
                $(".bimg>img").css({
                    left: -nx * $(".bimg").width() / $("#move").width() + "px",
                    top: -ny * $(".bimg").height() / $("#move").height() + "px"
                });
            })

        });
    </script>


</body>

</html>