JS小案例-天猫导航栏

最新推荐文章于 2022-02-23 10:58:34 发布

程序员的脱发之路

最新推荐文章于 2022-02-23 10:58:34 发布

阅读量428

点赞数 1

分类专栏： JavaScript学习笔记文章标签： JavaScript 个人学习笔记

本文链接：https://blog.csdn.net/weixin_43845090/article/details/85239427

版权

JavaScript学习笔记专栏收录该内容

39 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: 0;
        }
        body{
            background-color: pink;
        }
        #nav{
            width: 900px;
            height: 63px;
            background:url("day1_images/doubleOne.png") no-repeat right center #cccccc;
            border-radius: 5px;
            position: relative;
            margin: 100px auto;
        }
        #nav ul{
            position: relative;

        }
        #nav ul li{
            float: left;
            width: 88px;
            height: 63px;
            text-align: center;
            line-height: 70px;
            cursor: pointer;
        }
        #t_mall{
            width: 88px;
            height: 63px;
            background:url("day1_images/tMall.png") no-repeat;
            position: absolute;
        }
    </style>
</head>
<body>
<nav id="nav">
    <span id="t_mall"></span>
    <ul id="uu">
        <li>双11狂欢</li>
        <li>服装会场</li>
        <li>数码家电</li>
        <li>家居建材</li>
        <li>母婴童装</li>
        <li>手机会场</li>
        <li>美妆会场</li>
        <li>进口会场</li>
        <li>飞猪旅行</li>
    </ul>
</nav>
<script>
    window.onload= function () {
        //获取需要的标签
        var nav=$("nav");
        var t_mall=$("t_mall");
        var uu=$("uu");
        var allLis=uu.children;
        var beginX=0;//记录鼠标点击的位置
        //遍历li标签
        for(var i=0;i<allLis.length;i++){
            var li=allLis[i];
            //监听鼠标进入
            li.onmouseover= function () {
                end=this.offsetLeft;
            };
            //监听鼠标按下 之后自动停留的位置就是点击的位置
            li.onmousedown= function () {
                beginX=this.offsetLeft;
            };
            //监听鼠标离开
            li.onmouseout= function () {
                end=beginX;
            }
        }
        //实现缓动动画
        var begin= 0,end=0;
        setInterval(function () {
            begin=begin+(end - begin)*0.2;
            t_mall.style.left=begin+"px";
        },50);

        function $(id){
            return typeof id==="string"?document.getElementById(id):null;
        }
    }
</script>
</body>
</html>

![tMall.png当你移动或点击时用来指示当前导航栏![](https://img-blog.csdnimg.cn/20181224212301177.png)

doubleOne.png 导航栏右侧背景图片，即标识图
最终效果图，红色背景图会随着鼠标移动而移动

程序员的脱发之路

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS小案例-天猫导航栏

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; *{ margin: 0;
复制链接

扫一扫

专栏目录