效果如图鼠标滑动导航  下边显示不同效果

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>

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

  1. 用Python写一个滑动验证码

    1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...

  2. 微信小程序 使用swiper制作一个滑动导航

    最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单 ...

  3. js在IE8+兼容String没有trim方法，写一个兼容ie8一下的浏览器的trim()方法

    方法一: String.prototype.trim = function(){ return Trim(this);}; function LTrim(str) {    var i;     fo ...

  4. 【真的是随笔】如何利用htaccess把网站流量引到一个页面上（站点维护页效果）

    咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方 ...

  5. [前端]如何写一个水平导航栏？（浮动、inline-block+消除间距）

    在看W3school时,看到一个很好的例子,如何制作一个水平的导航栏?没有任何要求,只需要达到下面的效果: 我认为这个例子包含了很多css布局需要了解的知识,因此单独写一下. W3school上面的方 ...

  6. python 学习笔记 12 -- 写一个脚本获取城市天气信息

    近期在玩树莓派,前面写过一篇在树莓派上使用1602液晶显示屏,那么可以显示后最重要的就是显示什么的问题了. 最easy想到的就是显示时间啊,CPU利用率啊.IP地址之类的.那么我认为呢,假设可以显示当 ...

  7. 用React写一个工大导航

    Online: https://brenner8023.github.io/gdut-nav/ GitHub地址: https://github.com/brenner8023/gdut-nav 笔者 ...

  8. css3样式控制（鼠标滑过 显示标注信息）

    <div class="item"> <h1>A</h1> <div class="tooltip"> < ...

  9. 都是用 DllImport？有没有考虑过自己写一个 extern 方法？

    你做 .NET 开发的时候,一定用过 DllImport 这个特性吧,这货是用于 P/Invoke (Platform Invoke, 平台调用) 的.这种 DllImport 标记的方法都带有一个 ...

随机推荐

  1. stream_context_create解决file_get_contents超时处理

    stream_context_create作用:创建并返回一个文本数据流并应用各种选项,可用于fopen(),file_get_contents()等过程的超时设置.代理服务器.请求方式.头信息设置的 ...

  2. a标签拨打电话、发短信、发邮件

    1.<a href=”tel:xxxx”>拨打电话</a> 2.<a href=”sms:xxxx”>发短信</a> 3.<a href=”mai ...

  3. PYTHON 获取机器硬件信息及状态

    #!/usr/bin/env python # encoding: utf-8 from optparse import OptionParser import os import re import ...

  4. POJ 1699 Best Sequence dfs

    题目: http://poj.org/problem?id=1699 无意间A了..超时一次,加了一句 if(len > ans)return; 然后就A了,dfs题,没有太多好说的,代码写的效 ...

  5. 导航 - 利用系统自带的App导航

    导航: 可以将需要导航位置丢给系统自带的App进行导航 发送网络请求到公司服务器, 获取导航数据, 自己手动绘制导航 利用三方SDK进行导航(百度) #import "ViewControl ...

  6. app应用程序本地化－－备用

    一.简介 * 使用本地化功能,可以轻松地将应用程序翻译成多种语言,甚至可以翻译成同一语言的多种方言 * 如果要添加本地化功能,需要为每种支持的语言创建一个子目录,称为”本地化文件夹”,通常使用.lpr ...

  7. XE5 开发android平台搭建

    转载自:http://www.cnblogs.com/hezihang/p/3319980.html Delphi XE5的Android开发平台搭建   Delphi XE5支持Android AR ...

  8. APP二维码微信扫描后无法下载的问题

    微信打开网址添加在浏览器中打开提示  2014-10-13  蔡宝坚  移动前端 使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等.网上流传的各种微信打开下载链接,微信已更新基本失效,最 ...

  9. 【转】.Net程序员玩转Android系列之三~快速上手

    原文:http://www.cnblogs.com/HouZhiHouJueBlogs/p/3962122.html 快速环境搭建和Hello World 第一步:JAVA SDK(JDK)的安装: ...

  10. python中self.__class__

    1. python中的self python中的self就相当于C++中的this指针也就是指向对象本身的指针self.name = name 就是当前对象的成员变量name赋值为name. 2.py ...