zoukankan      html  css  js  c++  java
  • 门户网常用的文字滑动使图片切换效果

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>文字与图片切换</title>
    <style>
    *{margin:0;padding:0;border:0;list-style:none}
    .focusPic{500px; margin:0 auto; clear:both; text-align:center; border:1px solid #ccc;}
    .focusPic .focusTitle{240px;float:right; font-size:14px; text-align:left;}
    .focusPic .focusTitle li{height:28px; line-height:28px; cursor:pointer; font-size:12px; padding-left:10px; }
    .focusPic .focusTitle li a ,.focusPic .focusTitle li a:visited { color:#000;}
    .focusPic .focusTitle li a:hover {color:#bc2931;} /* www.codefans.net */
    .focusPic .focusTitle .current a ,.focusPic .focusTitle .current a:visited { color:#bc2931;}
    .focusPic .focusTitle .current a:hover {color:#bc2931;}
    .focusPic #focusMenu li.current{background:#efefef;font-weight:bold;color:#bc2931;}
    .focusPic #focusLeft{250px;overflow:hidden; float:left;background:#efefef;font-size:14px;line-height:100px;font-weight:bold;height:168px;}
    .focusPic #focusLeft li{display:none;}
    .focusPic #focusLeft li.current{display:block;}
    </style>
    </head>

    <body>
    <div class="focusPic">
    <ul id="focusLeft">
    <li class="current">VB在线出题考试系统</li>
    <li>jQuery 仿iGoogle 主页模块拖动</li>
    <li>jQuery UI 官方实例集</li>
    <li>VB在线出题考试系统</li>
    <li>小妖ASP投票调查系统 v4.0</li>
    <li>jQuery 带动画的日期选择插件</li>
    </ul>
    <div class="focusTitle">
    <ul id="focusMenu">
    <li class="current"><a href="/soft/5428.shtml">VB在线出题考试系统</a></li>
    <li><a href="http://www.codefans.net/soft/5430.shtml" target="_blank">jQuery 仿iGoogle 主页模块拖动</a></li>
    <li><a href="/soft/5429.shtml" target="_blank">jQuery UI 官方实例集</a></li>
    <li><a href="/soft/5428.shtml" target="_blank">VB在线出题考试系统(MSSQL)</a></li>
    <li><a href="/soft/5426.shtml" target="_blank">小妖ASP投票调查系统 v4.0</a></li>
    <li><a href="/soft/5421.shtml" target="_blank">jQuery 带动画的日期选择插件</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>
    <script language="javascript" type="text/javascript">
    //<![CDATA[
    var $ = function(id) {
     return document.getElementById(id);
    };
    Function.prototype.bind = function() {
     if (arguments.length < 2 && arguments[0] == null) {
      return this;
     }
        var __method = this, args = $A(arguments), object = args.shift();
        return function() {
      return __method.apply(object, args.concat($A(arguments)));
        };
    };
    var isArray = function(testVar) {
     return Array == testVar.constructor ? 1 : String != testVar.constructor && null != testVar.length && !testVar.alert && !testVar.nodeType ? 2 : 0;
    };
    var $A = function(variable) {
     switch (isArray(variable)) {
      case 1:
       return variable;
      case 2:
       var arr = [], i = -1, len = variable.length;
       while (++i < len) {
        arr[i] = variable[i];
       }
       return arr;
      default:
       return [variable];
     }
    };
    var addClass = function(elem, className) {
     if ((" " + elem.className + " ").indexOf(" " + className + " ") == -1) {
      if (elem.className == "") {
       elem.className = className;
      } else {
       elem.className += (" " + className);
      }
     }
    };
    var removeClass = function(elem, className) {
     var newClass = (" " + elem.className + " ").replace(" " + className + " ", " ");
     elem.className = newClass.substr(1, newClass.length - 2);
    };
    var addEvent = function(elem, eventName, handler) {
     if (elem.addEventListener) {
      elem.addEventListener(eventName, handler, false);
     } else if (elem.attachEvent) {
      elem.attachEvent("on" + eventName, handler);
     }
    };
    function Slide(menus, contents, css, eventName, interval) {
     var curSeq = 0, length = contents.length, timerIds = [], isStopped;
     if (menus && length != menus.length) {
      throw new Error("the amount of menus and contents is not equal");
     }
     
     var hide = function(seq) {
      removeClass(contents[seq], css);
      if (menus) {
       removeClass(menus[seq], css);
      }
     };
     
     var show = function(seq) {
      addClass(contents[seq], css);
      if (menus) {
       addClass(menus[seq], css);
      }
      curSeq = seq;
     };
     
     this.showNext = function() {
      var next = curSeq + 1;
      if (next >= length) {
       next = 0;
      }
      var i = length;
      while (--i >= 0) {
       if (i != next) {
        hide(i);
       } else {
        show(i);
       }
      }
     };
     
     this.change = function(event) {
      if (this != menus[curSeq]) {
       var i = length;
       while (--i >= 0) {
        if (menus[i] != this) {
         hide(i);
        } else {
         show(i);
        }
       }
      }
      e = window.event || event;
      e.cancelBubble = true;
     };
     
     this.play = function(speed) {
      isStopped = false;
      timerIds.push(setInterval(this.showNext.bind(this), speed));
     };
     
     this.pause = function() {
      isStopped = true;
      var i = length;
      while (--i >= 0) {
       clearInterval(timerIds[i]);
       timerIds.splice(i, 1);
      }
     };
     
     var i = length;
     while (--i >= 0) {
      addEvent(menus[i], eventName, this.change.bind(menus[i]));
      if (interval > 0) {
       addEvent(menus[i], "mouseover", this.pause);
       addEvent(menus[i], "mouseout", this.play.bind(this, interval));
      }
     }
     if (interval > 0) {
      this.play(interval);
     }
    }
    var focusImg = new Slide($("focusMenu").getElementsByTagName("li"), $("focusLeft").getElementsByTagName("li"), "current", "mouseover", 3000);
    //]]>
    </script>
    </body>


    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/mane_yao/archive/2010/04/29/5543304.aspx

  • 相关阅读:
    使用NBU进行oracle异机恢复
    mycat偶尔会出现JVM报错double free or corruption并崩溃退出
    exp导出数据时丢表
    service_names配置不正确,导致dg创建失败
    XML概念定义以及如何定义xml文件编写约束条件java解析xml DTD XML Schema JAXP java xml解析 dom4j 解析 xpath dom sax
    HTTP协议简介详解 HTTP协议发展 原理 请求方法 响应状态码 请求头 请求首部 java模拟浏览器客户端服务端
    java集合框架容器 java框架层级 继承图结构 集合框架的抽象类 集合框架主要实现类
    【JAVA集合框架一 】java集合框架官方介绍 Collections Framework Overview 集合框架总览 翻译 javase8 集合官方文档中文版
    java内部类深入详解 内部类的分类 特点 定义方式 使用
    再谈包访问权限 子类为何不能使用父类protected方法
  • 原文地址:https://www.cnblogs.com/mane/p/1829988.html
Copyright © 2011-2022 走看看