zoukankan      html  css  js  c++  java
  • 天猫导航案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;border:0;list-style: none;}
            body{background-color: pink;}
    
            #nav{
                 900px;height: 63px;
                background:url("images/doubleOne.png") no-repeat right
                center #fff;
                border-radius: 5px;position: relative;margin: 100px auto;}
            #nav ul{position: relative;}
            #nav ul li{float: left; 88px;height: 63px;text-align: center;line-height: 70px;cursor: pointer;}
    
            #t_mall{ 88px;height: 63px;background: url("images/tMall.png") no-repeat;position: absolute;}
        </style>
    </head>
    <body>
    <nav id="nav">
        <span id="t_mall"></span>
        <ul>
            <li>双11狂欢</li>
            <li>服装会场</li>
            <li>数码家电</li>
            <li>家具建材</li>
            <li>母婴童装</li>
            <li>手机会场</li>
            <li>美妆会场</li>
            <li>进口会场</li>
            <li>飞猪旅行</li>
        </ul>
    </nav>
    
    <script src="MyTool/MyTool.js"></script>
    <script>
        window.addEventListener('load', function (ev) {
            // 1. 获取需要的标签
            var nav = myTool.$('nav');
            var t_mall = nav.children[0];
            var ul = nav.children[1];
            var allLis = ul.children;
    
            // 记录鼠标点击元素的位置  中间量
            var beginX = 0;
    
            // 2. 遍历操作
            for (var i = 0; i < allLis.length; i++) {
                var li = allLis[i];
                // 2.1 监听鼠标的进入
                li.addEventListener('mouseover', function () {
                     end = this.offsetLeft;
                });
    
                // 2.2  监听鼠标按下事件
                li.addEventListener('mousedown', function () {
                    beginX = this.offsetLeft;
                });
    
                // 2.3 监听鼠标离开事件
                li.addEventListener('mouseout', function () {
                    end = beginX;
                });
            }
    
            // 3. 缓动动画
            var begin = 0, end = 0;
            setInterval(function () {
                begin += (end - begin) * 0.2;
                t_mall.style.left = begin + 'px'
            }, 10);
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    UE4_简易AI_玩家死亡动画bug修复
    UE4_简易AI_Ai攻击
    pikachu-SSRF
    pikachu-XXE漏洞
    pikachu-PHP反序列化
    pikachu-Over permission(越权漏洞)
    pikachu-不安全的文件下载和上传
    pikachu-File Inclusion(文件包含漏洞)
    Web安全之RCF(远程命令,代码执行漏洞)
    Web安全之SQL Inject 2
  • 原文地址:https://www.cnblogs.com/zhangzhengyang/p/11198421.html
Copyright © 2011-2022 走看看