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

  • 相关阅读:
    3.请问配置JDK时环境变量path和JAVA_HOME的作用是什么?
    2.请尝试安装和配置JDK,并给出安装、配置JDK的步骤。
    1.Java为什么能跨平台运行?请简述原理
    字符集
    Java程序输出打字
    <marquee>,视频和音频的插入,正则表达式
    windows.document对象
    while;do while;switch;break;continue
    循环语句 ,for语句
    PHP判断一个文件是否能够被打开
  • 原文地址:https://www.cnblogs.com/mane/p/1829988.html
Copyright © 2011-2022 走看看