利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果

时间：2024-08-22 18:04:44

效果如图利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果鼠标滑动导航  下边显示不同效果

html代码和css格式代码

<body>

<div id="tab" class="tab">
    <div class="tab-title" id="tab-title">
        <ul>
            <li class="select" data-flag="0"><a href="#">公告</a></li>
            <li  data-flag="1"><a href="#">规则</a></li>
            <li  data-flag="2"><a href="#">论坛</a></li>
            <li  data-flag="3"><a href="#">安全</a></li>
            <li  data-flag="4"><a href="#">公益</a></li>
        </ul>
    </div>
    <div class="tab-content" id="tab-content">
        <div class="tabct" style="display: block">
            <ul>
                <li><a href="#">淘宝招募卖家志愿者</a></li>
                <li><a href="#">淘宝招募卖家志愿者</a></li>
                <li><a href="#">淘宝招募卖家志愿者</a></li>
                <li><a href="#">淘宝招募卖家志愿者</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">阿里推出兼职神器</a></li>
                <li><a href="#">阿里推出兼职神器</a></li>
                <li><a href="#">阿里推出兼职神器</a></li>
                <li><a href="#">阿里推出兼职神器</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">700家热风淘宝路</a></li>
                <li><a href="#">700家热风淘宝路</a></li>
                <li><a href="#">700家热风淘宝路</a></li>
                <li><a href="#">700家热风淘宝路</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">是赚钱还是骗子</a></li>
                <li><a href="#">是赚钱还是骗子</a></li>
                <li><a href="#">是赚钱还是骗子</a></li>
                <li><a href="#">是赚钱还是骗子</a></li>
            </ul>
        </div>
        <div class="tabct" style="display: none">
            <ul>
                <li><a href="#">淘宝用户必备神器</a></li>
                <li><a href="#">淘宝用户必备神器</a></li>
                <li><a href="#">淘宝用户必备神器</a></li>
                <li><a href="#">淘宝用户必备神器</a></li>
            </ul>
        </div>
    </div>

</div>
</body>

css样式：
<style>
    body {
        background-color: #eeeeee;
    }
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 12px;
    }
    a {
        text-decoration: none;
        color: #3C3C3C;
    }
    .tab {
        width: 298px;
        height: 98px;
        /*overflow: hidden;*/
        margin: 10px;
        border: 1px solid #eeeeee;
        background-color: #ffffff;
    }
    .tab-title {
        width: 300px;
        height: 26px;
    }
    .tab-title ul li {
        float: left;
        width: 58px;
        height: 26px;
        text-align: center;
        line-height: 26px;
        padding: 0 1px;
    }
    .tab-title ul {
        width: 300px;
    }
    .tab-title ul li.select {
        font-weight: 700;
        border-bottom: 2px solid orange;
    }
    .tab li a:hover {
        color: orange;
    }
    .tabct {
        margin: 20px 10px;
        overflow: hidden;
    }
    .tabct li {
        float: left;
        width: 139px;
        height: 25px;
    }

</style>
js代码：
<script>

var lilist = document.getElementById("tab-title").getElementsByTagName("li");  // 获取到的是li标签的一个集合//先获取导航栏的li（利用链式选取）
var divlist = document.getElementsByClassName("tabct");                         //获取到每个导航选项对应的 div内容集合
var timer = null ;                                                              //定义一个timer 方便后面使用setTimeOut和clearTimeOut方法
for(var i = 0;i<lilist.length;i++){                                             //因为有多个选项 所以利用for循环来简化代码 循环次数是 导航选项的个数
     lilist[i].value = i;            // 给导航里的li进行 value的赋值（li的属性中有value属性 可以读写）
                                        为什么要给他赋值呢，因为要与每个对应的内容绑定  所以必须建立一个关系  通过value来建立  也可以
                                        lilist[i].flag = i;  这里的flag是随便取的 （可以打印 lilist  然后在每一项的  dataset属性里面看到我们给他自定以的flag值，这里的flag名字是随便起的）
                                        也可以  在HTML中  给导航的每个li 设置   data- 加上 自己定义的名字  然后赋值 ，例如：data-haha = “1”；
      lilist[i].onmouseover = function(e){ //对每个导航巷进行鼠标进入时显示内容事件
            var that = this;                // this 是鼠标滑动绑定的真正触发者，也就是 lilist[i]; 为什么 用一个that变量承载呢，因为后面我们需要用到该指定；
            timer = setTimeOut(             //设定导航选项延迟触发，
                  function(){
                       for(var i = 0;i<lilist.length;i++){ // 在事件触发时候  需要先将 所以导航项的className制空，以及display制none值
                            if(lilist[i].className=='select'){      
                                   lilist[i].className="";   //制空className
                                   divlist[i].style.display='none'; 改变display值
                                   break;                      //因为页面里只设置了一个className=select的li 所以找到它清除退出循环就可以了
                             }
                         ｝
                        that.className = "select"; //  将事件触发者的className  设置成select；这里that 就代表事件触发者；
                        divlist[that.dataset.flag].style.display='block';   //显示对于的内容
                   }
                  ，300                                //延长时间300 毫秒
                  )                   
        }
        lilist[i].onmouseout=function(){
              clearTimeOut(timer);          //  清楚Settimeout事件使得导航在  快速滑动的时候 不会发生内容的闪动   
         }
}

</script>

相关文章