zoukankan      html  css  js  c++  java
  • 动态翻滚的导航条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    	<meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>动态翻滚的导航条</title>
    <style type="text/css">
    .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}
    div#nav{height:32px; background:red repeat-x}
    div#nav ul{
      705px;
      list-style:none;
      margin-top: 0;
      margin-right: auto;
      margin-bottom: 0;
      margin-left: 0px;
    }
    div#nav ul li{
      float:left;
      height:32px;
      overflow:hidden;
      background:green;
      background-repeat: repeat-y;
      background-position: right 0;
      padding-top: 0;
      padding-right: 1px;
      padding-bottom: 0;
      padding-left: 0px;
      font-family: Arial;
      font-size: 12px;
      line-height: 32px;
      font-weight: bold;
    }
    div#nav ul li a{
      float:left;
      height:100%;
       77px;
      background:orange repeat-x;
      color:#fff;
      text-decoration:none;
      padding-top: 0;
      padding-right: 5px;
      padding-bottom: 0;
      padding-left: 5px;
      text-align:center;
    }
    div#nav ul li a.hover{
      clear:both;
      background-position:0 -32px;
       77px;
    }
    div#nav ul li.on a{
      background-position:0 -32px;
    }
    div#nav ul li.nobg{background:pink}
    /* ]]> */
    </style>
    </head>
    <body>
    <div id="nav">
    <ul class="clear">
    <li><a href="#">脚本之家</a></li>
    <li><a href="#">网页特效</a></li>
    <li><a href="#">工具软件</a></li>
    <li><a href="#">脚本下载</a></li>
    <li><a href="#">菜单导航</a></li>
    <li><a href="#">层和布局</a></li>
    <li><a href="#">论坛社区</a></li>
    <li><a href="#">广告联系</a></li>
    <li class="nobg"></li>
    </ul>
    </div>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript"> 
    /* <![CDATA[ */
    function nav(c, config){
      this.config = config || {speed: 10, num: 2};
      this.container = (typeof(c)=="object") ? c : document.getElementById(c);
      this.lineHeight = this.container.offsetHeight;
      this.scrollTimeId = null;
      var _this = this;  
      this.__construct = function (){
        var inner,el,href;
        inner = _this.container.childNodes[0].innerHTML;
        href = _this.container.childNodes[0].href;
        el = document.createElement("a");
        el.innerHTML = inner;
        el.href = href;
        el.className = 'hover';
        _this.container.appendChild(el);
        _this.container.onmouseover = function (){_this.start()};
        _this.container.onmouseout = function (){_this.end()};
      }();
      this.start = function (){
        _this.clear();
        _this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);
      };
      this.end = function (){
        _this.clear();
        _this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);
      };
      this.scrollUp = function (){
        var c = _this.container;  
        if(c.scrollTop >= _this.lineHeight){c.scrollTop = _this.lineHeight;return;}
        c.scrollTop += _this.config.num;
        _this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);
      };
      this.scrollDown = function (){
        var c = _this.container;
        
        if(c.scrollTop <= 0){c.scrollTop = 0;return;}
        c.scrollTop -= _this.config.num;
        _this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);
      };
      this.clear = function (){clearTimeout(_this.scrollTimeId)};
    }
    (function(){
      var container = document.getElementById('nav');
      var el_li = container.getElementsByTagName('li');
      var arr = [];
      for( var i = 0; i < el_li.length; i++){
        if(el_li[i].className == 'on') continue;
        arr[i] = new nav(el_li[i], {speed: 100, num: 4});
      }
    })
    ();
    /* ]]> */
    </script>
    </body>
    </html>
    

    原文地址:https://www.jb51.net/article/72663.htm

  • 相关阅读:
    多文件程序编译时头文件的使用方法
    360浏览器等被金山毒霸网强制霸占问题解决
    surface重装系统后,屏幕亮度不能调节,显示适配器出现黄色三角、windows hello不能正常使用
    Failed to execute "C:learnC程序练习1.exe": Error 0: 操作成功完成。 请按任意键继续. . .问题解决
    递归总结及斐波那契数列的实现
    在SpingBoot中使用Redis对接口进行限流
    在SpringBoot App中使用GoogleReCaptcha3过滤非法的请求
    在springboot中使用Guava基于令牌桶实现限流
    springboot jwt redis实现token刷新
    使用spring-validation和@RequestParam(required = false)字符串默认值的校验问题
  • 原文地址:https://www.cnblogs.com/liyouwu/p/9760830.html
Copyright © 2011-2022 走看看