关于奇矩互动奇矩互动招贤纳士奇矩互动优质虚拟主机Discuz!商业用户享有本站VIP服务LAMP环境配置手册(CentOS5.1)
 16 12
发新话题
打印

JavaScript 经典效果集

JavaScript 经典效果集

作者: 梦想照进现实-鹏

一、让你的文本链接渐隐渐显
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script language="javascript" type="text/javascript">
startColor = "#671700"; // 定义链接颜色
endColor = "#D8D1C5";  // 定义要渐变到最后的颜色
stepIn = 17;
stepOut = 23;
/*
定义是否让所有的文本链接自动渐变,true为是,false为否
*/
autoFade = true;  
/*
在这里定义css样式里的类class:fade,如果为true,那么你要将要渐变的链接上加上此fade样式
*/
sloppyClass = false;
hexa = new makearray(16);
for(var i = 0; i < 10; i++)
    hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
document.onmouseover = domouseover;
document.onmouseout = domouseout;
startColor = dehexize(startColor.toLowerCase());
endColor = dehexize(endColor.toLowerCase());
var fadeId = new Array();
function dehexize(Color){
var colorArr = new makearray(3);
for (i=1; i<7; i++){
  for (j=0; j<16; j++){
   if (Color.charAt(i) == hexa[j]){
    if (i%2 !=0)
     colorArr[Math.floor((i-1)/2)]=eval(j)*16;
    else
     colorArr[Math.floor((i-1)/2)]+=eval(j);
   }
  }
}
return colorArr;
}
function domouseover() {
  if(document.all){
   var srcElement = event.srcElement;
   if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(startColor,endColor,srcElement.uniqueID,stepIn);      
   }
}
function domouseout() {
  if (document.all){
   var srcElement = event.srcElement;
    if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1))
        fade(endColor,startColor,srcElement.uniqueID,stepOut);
    }
}
function makearray(n) {
    this.length = n;
    for(var i = 1; i <= n; i++)
        this[i] = 0;
    return this;
}
function hex(i) {
    if (i < 0)
        return "00";
    else if (i > 255)
        return "ff";
    else
       return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setColor(r, g, b, element) {
      var hr = hex(r); var hg = hex(g); var hb = hex(b);
      element.style.color = "#"+hr+hg+hb;
}
function fade(s,e, element,step){
var sr = s[0]; var sg = s[1]; var sb = s[2];
var er = e[0]; var eg = e[1]; var eb = e[2];

if (fadeId[0] != null && fade[0] != element){
  setColor(sr,sg,sb,eval(fadeId[0]));
  var i = 1;
  while(i < fadeId.length){
   clearTimeout(fadeId[i]);
   i++;
   }
  }
  
    for(var i = 0; i <= step; i++) {
     fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +
   step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+
   ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step);
  }
fadeId[0] = element;
}
</script>
</BODY>
</HTML>
<A HREF="http://www.ismole.com">让你的文本链接渐隐渐显</A>
二、很多的脚本翻页
复制内容到剪贴板
代码:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>
<script language="JavaScript">
<!--
/*
showPages v1.1
=================================
Infomation
----------------------
Author : Lapuasi
E-Mail : [email]lapuasi@gmail.com[/email]
Web : [url]http://www.lapuasi.com[/url]
Date : 2005-11-17
Example
----------------------
var pg = new showPages('pg');
pg.pageCount = 12; //定义总页数(必要)
pg.argName = 'p';    //定义参数名(可选,缺省为page)
pg.printHtml();        //显示页数
Supported in Internet Explorer, Mozilla Firefox
*/
function showPages(name) { //初始化属性
        this.name = name;      //对象名称
        this.page = 1;         //当前页数
        this.pageCount = 1;    //总页数
        this.argName = 'page'; //参数名
        this.showTimes = 1;    //打印次数
}
showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
        var args = location.search;
        var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
        var chk = args.match(reg);
        this.page = RegExp.$1;
}
showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
        if (isNaN(parseInt(this.page))) this.page = 1;
        if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
        if (this.page < 1) this.page = 1;
        if (this.pageCount < 1) this.pageCount = 1;
        if (this.page > this.pageCount) this.page = this.pageCount;
        this.page = parseInt(this.page);
        this.pageCount = parseInt(this.pageCount);
}
showPages.prototype.createHtml = function(mode){ //生成html代码
        var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
        if (mode == '' || typeof(mode) == 'undefined') mode = 0;
        switch (mode) {
                case 0 : //模式1 (页数,首页,前页,后页,尾页)
                        strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
                        strHtml += '<span class="number">';
                        if (prevPage < 1) {
                                strHtml += '<span title="First Page">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
                        }
                        for (var i = 1; i <= this.pageCount; i++) {
                                if (i > 0) {
                                        if (i == this.page) {
                                                strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
                                        } else {
                                                strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
                                        }
                                }
                        }
                        if (nextPage > this.pageCount) {
                                strHtml += '<span title="Next Page">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
                        }
                        strHtml += '</span><br />';
                        break;
                case 1 : //模式1 (10页缩略,首页,前页,后页,尾页)
                        strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
                        strHtml += '<span class="number">';
                        if (prevPage < 1) {
                                strHtml += '<span title="First Page">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
                        }
                        if (this.page % 10 ==0) {
                                var startPage = this.page - 9;
                        } else {
                                var startPage = this.page - this.page % 10 + 1;
                        }
                        if (startPage > 10) strHtml += '<span title="Prev 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
                        for (var i = startPage; i < startPage + 10; i++) {
                                if (i > this.pageCount) break;
                                if (i == this.page) {
                                        strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
                                } else {
                                        strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
                                }
                        }
                        if (this.pageCount >= startPage + 10) strHtml += '<span title="Next 10 Pages"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
                        if (nextPage > this.pageCount) {
                                strHtml += '<span title="Next Page">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
                        }
                        strHtml += '</span><br />';
                        break;
                case 2 : //模式2 (前后缩略,页数,首页,前页,后页,尾页)
                        strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
                        strHtml += '<span class="number">';
                        if (prevPage < 1) {
                                strHtml += '<span title="First Page">&laquo;</span>';
                                strHtml += '<span title="Prev Page">&#8249;</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">&laquo;</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">&#8249;</a></span>';
                        }
                        if (this.page != 1) strHtml += '<span title="Page 1"><a href="javascript:' + this.name + '.toPage(1);">[1]</a></span>';
                        if (this.page >= 5) strHtml += '<span>...</span>';
                        if (this.pageCount > this.page + 2) {
                                var endPage = this.page + 2;
                        } else {
                                var endPage = this.pageCount;
                        }
                        for (var i = this.page - 2; i <= endPage; i++) {
                                if (i > 0) {
                                        if (i == this.page) {
                                                strHtml += '<span title="Page ' + i + '">[' + i + ']</span>';
                                        } else {
                                                if (i != 1 && i != this.pageCount) {
                                                        strHtml += '<span title="Page ' + i + '"><a href="javascript:' + this.name + '.toPage(' + i + ');">[' + i + ']</a></span>';
                                                }
                                        }
                                }
                        }
                        if (this.page + 3 < this.pageCount) strHtml += '<span>...</span>';
                        if (this.page != this.pageCount) strHtml += '<span title="Page ' + this.pageCount + '"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">[' + this.pageCount + ']</a></span>';
                        if (nextPage > this.pageCount) {
                                strHtml += '<span title="Next Page">&#8250;</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">&#8250;</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">&raquo;</a></span>';
                        }
                        strHtml += '</span><br />';
                        break;
                case 3 : //模式3 (箭头样式,首页,前页,后页,尾页) (only IE)
                        strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
                        strHtml += '<span class="arrow">';
                        if (prevPage < 1) {
                                strHtml += '<span title="First Page">9</span>';
                                strHtml += '<span title="Prev Page">7</span>';
                        } else {
                                strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">9</a></span>';
                                strHtml += '<span title="Prev Page"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">7</a></span>';
                        }
                        if (nextPage > this.pageCount) {
                                strHtml += '<span title="Next Page">8</span>';
                                strHtml += '<span title="Last Page">:</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">8</a></span>';
                                strHtml += '<span title="Last Page"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">:</a></span>';
                        }
                        strHtml += '</span><br />';
                        break;
                case 4 : //模式4 (下拉框)
                        if (this.pageCount < 1) {
                                strHtml += '<select name="toPage" disabled>';
                                strHtml += '<option value="0">No Pages</option>';
                        } else {
                                var chkSelect;
                                strHtml += '<select name="toPage" onchange="' + this.name + '.toPage(this);">';
                                for (var i = 1; i <= this.pageCount; i++) {
                                        if (this.page == i) chkSelect=' selected="selected"';
                                        else chkSelect='';
                                        strHtml += '<option value="' + i + '"' + chkSelect + '>Pages: ' + i + ' / ' + this.pageCount + '</option>';
                                }
                        }
                        strHtml += '</select>';
                        break;
                case 5 : //模式5 (输入框)
                        strHtml += '<span class="input">';
                        if (this.pageCount < 1) {
                                strHtml += '<input type="text" name="toPage" value="No Pages" class="itext" disabled="disabled">';
                                strHtml += '<input type="button" name="go" value="GO" class="ibutton" disabled="disabled"></option>';
                        } else {
                                strHtml += '<input type="text" value="Input Page:" class="ititle" readonly="readonly">';
                                strHtml += '<input type="text" id="pageInput' + this.showTimes + '" value="' + this.page + '" class="itext" title="Input page" onkeypress="return ' + this.name + '.formatInputPage(event);" onfocus="this.select()">';
                                strHtml += '<input type="text" value=" / ' + this.pageCount + '" class="icount" readonly="readonly">';
                                strHtml += '<input type="button" name="go" value="GO" class="ibutton" onclick="' + this.name + '.toPage(document.getElementById(\'pageInput' + this.showTimes + '\').value);"></option>';
                        }
                        strHtml += '</span>';
                        break;
                default :
                        strHtml = 'Javascript showPage Error: not find mode ' + mode;
                        break;
        }
        return strHtml;
}
showPages.prototype.createUrl = function (page) { //生成页面跳转url
        if (isNaN(parseInt(page))) page = 1;
        if (page < 1) page = 1;
        if (page > this.pageCount) page = this.pageCount;
        var url = location.protocol + '//' + location.host + location.pathname;
        var args = location.search;
        var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
        args = args.replace(reg,'$1');
        if (args == '' || args == null) {
                args += '?' + this.argName + '=' + page;
        } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
                        args += this.argName + '=' + page;
        } else {
                        args += '&' + this.argName + '=' + page;
        }
        return url + args;
}
showPages.prototype.toPage = function(page){ //页面跳转
        var turnTo = 1;
        if (typeof(page) == 'object') {
                turnTo = page.options[page.selectedIndex].value;
        } else {
                turnTo = page;
        }
        self.location.href = this.createUrl(turnTo);
}
showPages.prototype.printHtml = function(mode){ //显示html代码
        this.getPage();
        this.checkPages();
        this.showTimes += 1;
        document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
        document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml(mode);
       
}
showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
        var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
        if(!ie) var key = e.which;
        else var key = event.keyCode;
        if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
        return false;
}
//-->
</script>
<style>
/* Pages Main Tyle */
.pages {
        color: #000000;
        cursor: default;
        font-size: 10px;
        font-family: Tahoma, Verdana;
        padding: 3px 0px 3px 0px;
}
.pages .count, .pages .number, .pages .arrow {
        color: #000000;
        font-size: 10px;
        background-color: #F7F7F7;
        border: 1px solid #CCCCCC;
}
/* Page and PageCount Style */
.pages .count {
        font-weight: bold;
        border-right: none;
        padding: 2px 10px 1px 10px;
}
/* Mode 0,1,2 Style (Number) */
.pages .number {
        font-weight: normal;
        padding: 2px 10px 1px 10px;
}
.pages .number a, .pages .number span {
        font-size: 10px;
}
.pages .number span {
        color: #999999;
        margin: 0px 3px 0px 3px;
}
.pages .number a {
        color: #000000;
        text-decoration: none;
}
.pages .number a:hover {
        color: #0000ff;
}
/* Mode 3 Style (Arrow) */
.pages .arrow {
        font-weight: normal;
        padding: 0px 5px 0px 5px;
}
.pages .arrow a, .pages .arrow span {
        font-size: 10px;
        font-family: Webdings;
}
.pages .arrow span {
        color: #999999;
        margin: 0px 5px 0px 5px;
}
.pages .arrow a {
        color: #000000;
        text-decoration: none;
}
.pages .arrow a:hover {
        color: #0000ff;
}
/* Mode 4 Style (Select) */
.pages select, .pages input {
        color: #000000;
        font-size: 10px;
        font-family: Tahoma, Verdana;
}
/* Mode 5 Style (Input) */
.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {
        color: #666666;
        font-weight: bold;
        background-color: #F7F7F7;
        border: 1px solid #CCCCCC;
}
.pages .input input.ititle {
        width: 70px;
        text-align: right;
        border-right: none;
}
.pages .input input.itext {
        width: 25px;
        color: #000000;
        text-align: right;
        border-left: none;
        border-right: none;
}
.pages .input input.icount {
        width: 35px;
        text-align: left;
        border-left: none;
}
.pages .input input.ibutton {
        height: 17px;
        color: #FFFFFF;
        font-weight: bold;
        font-family: Verdana;
        background-color: #999999;
        border: 1px solid #666666;
        padding: 0px 0px 2px 1px;
        margin-left: 2px;
        cursor: hand;
}
/* body */
body {
        font-size: 12px;
}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var pg = new showPages('pg');
pg.pageCount =12;  // 定义总页数(必要)
//pg.argName = 'p';  // 定义参数名(可选,默认为page)
document.write('<br>Show Times: ' + pg.showTimes + ', Mood Default');
pg.printHtml();
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 0');
pg.printHtml(0);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 1');
pg.printHtml(1);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 2');
pg.printHtml(2);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');
pg.printHtml(3);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 4');
pg.printHtml(4);
document.write('<br>Show Times: ' + pg.showTimes + ', Mood 5');
pg.printHtml(5);
//-->
</script>
</body>
</html>
[ 本帖最后由 hailuo 于 2008-6-24 09:33 编辑 ]
我只是一个大侠!

TOP

三、超级强大的表单验证
复制内容到剪贴板
代码:
<title>表单验证类 Validator v1.01</title>
<style>
body,td{font:normal 12px Verdana;color:#333333}
input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
table{border-collapse:collapse;}
td{padding:3px}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
</style>
<table align="center">
  <form name="theForm" id="demo" action="" method="get" onSubmit="return Validator.Validate(this,2)">
    <tr>
   <td>真实姓名:</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
  </tr>
  <tr>
   <td>英文名:</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
  </tr>
    <tr>
   <td>主页:</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>
  </tr>
  <tr>
   <td>密码:</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>
  </tr>
  <tr>
   <td>重复:</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
  </tr>
  <tr>
   <td>信箱:</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
  </tr>
    <tr>
   <td>信箱:</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
  </tr>
  <tr>
   <td>QQ:</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
  </tr>
    <tr>
   <td>身份证:</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
  </tr>
  <tr>
   <td>年龄:</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
  </tr>
   <tr>
   <td>年龄1:</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEqual"></td>
  </tr>
   <tr>
   <td>电话:</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
  </tr>
   <tr>
   <td>手机:</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
  </tr>
     <tr>
   <td>生日:</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
  </tr>
   <tr>
   <td>邮政编码:</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]\d{5}$" msg="邮政编码不存在"></td>
  </tr>
  <tr>
   <td>邮政编码:</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
  </tr>
  <tr>
   <td>操作系统:</td><td><select name="Operation" dataType="Require"  msg="未选择所用操作系统" ><option value="">选择您所用的操作系统</option><option value="Win98">Win98</option><option value="Win2k">Win2k</option><option value="WinXP">WinXP</option></select></td>
  </tr>
  <tr>
   <td>所在省份:</td><td>广东<input name="Province" value="1" type="radio">陕西<input name="Province" value="2" type="radio">浙江<input name="Province" value="3" type="radio">江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" ></td>
  </tr>
  <tr>
   <td>爱好:</td><td>运动<input name="Favorite" value="1" type="checkbox">上网<input name="Favorite" value="2" type="checkbox">听音乐<input name="Favorite" value="3" type="checkbox">看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好"></td>
  </tr>
   <td>自我介绍:</td><td><textarea name="Description" dataType="Limit" max="10"  msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
  </tr>
     <td>自传:</td><td><textarea name="History" dataType="LimitB" min="3" max="10"  msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
  </tr>
  <tr>
   <td colspan="2"><input name="Submit" type="submit" value="确定提交"><input onClick="Validator.Validate(document.getElementById('demo'))" value="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),2)" value="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById('demo'),3)" value="检验模式3" type="button"></td>
  </tr>
  </form>
</table>
<script>
/*************************************************
        Validator v1.01
        code by 我佛山人
        [email]wfsr@cunite.com[/email]
        [url]http://www.cunite.com[/url]
*************************************************/
Validator = {
        Require : /.+/,
        Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
        Phone : /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/,
        Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/,
        Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
        IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/,
        Currency : /^\d+(\.\d+)?$/,
        Number : /^\d+$/,
        Zip : /^[1-9]\d{5}$/,
        QQ : /^[1-9]\d{4,8}$/,
        Integer : /^[-\+]?\d+$/,
        Double : /^[-\+]?\d+(\.\d+)?$/,
        English : /^[A-Za-z]+$/,
        Chinese :  /^[\u0391-\uFFE5]+$/,
        UnSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
        IsSafe : function(str){return !this.UnSafe.test(str);},
        SafeString : "this.IsSafe(value)",
        Limit : "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
        LimitB : "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
        Date : "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
        Repeat : "value == document.getElementsByName(getAttribute('to'))[0].value",
        Range : "getAttribute('min') < value && value < getAttribute('max')",
        Compare : "this.compare(value,getAttribute('operator'),getAttribute('to'))",
        Custom : "this.Exec(value, getAttribute('regexp'))",
        Group : "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
        ErrorItem : [document.forms[0]],
        ErrorMessage : ["以下原因导致提交失败:\t\t\t\t"],
        Validate : function(theForm, mode){
                var obj = theForm || event.srcElement;
                var count = obj.elements.length;
                this.ErrorMessage.length = 1;
                this.ErrorItem.length = 1;
                this.ErrorItem[0] = obj;
                for(var i=0;i<count;i++){
                        with(obj.elements[i]){
                                var _dataType = getAttribute("dataType");
                                if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined")  continue;
                                this.ClearState(obj.elements[i]);
                                if(getAttribute("require") == "false" && value == "") continue;
                                switch(_dataType){
                                        case "Date" :
                                        case "Repeat" :
                                        case "Range" :
                                        case "Compare" :
                                        case "Custom" :
                                        case "Group" :
                                        case "Limit" :
                                        case "LimitB" :
                                        case "SafeString" :
                                                if(!eval(this[_dataType]))        {
                                                        this.AddError(i, getAttribute("msg"));
                                                }
                                                break;
                                        default :
                                                if(!this[_dataType].test(value)){
                                                        this.AddError(i, getAttribute("msg"));
                                                }
                                                break;
                                }
                        }
                }
                if(this.ErrorMessage.length > 1){
                        mode = mode || 1;
                        var errCount = this.ErrorItem.length;
                        switch(mode){
                        case 2 :
                                for(var i=1;i<errCount;i++)
                                        this.ErrorItem[i].style.color = "red";
                        case 1 :
                                alert(this.ErrorMessage.join("\n"));
                                this.ErrorItem[1].focus();
                                break;
                        case 3 :
                                for(var i=1;i<errCount;i++){
                                try{
                                        var span = document.createElement("SPAN");
                                        span.id = "__ErrorMessagePanel";
                                        span.style.color = "red";
                                        this.ErrorItem[i].parentNode.appendChild(span);
                                        span.innerHTML = this.ErrorMessage[i].replace(/\d+:/,"*");
                                        }
                                        catch(e){alert(e.description);}
                                }
                                this.ErrorItem[1].focus();
                                break;
                        default :
                                alert(this.ErrorMessage.join("\n"));
                                break;
                        }
                        return false;
                }
                return true;
        },
        limit : function(len,min, max){
                min = min || 0;
                max = max || Number.MAX_VALUE;
                return min <= len && len <= max;
        },
        LenB : function(str){
                return str.replace(/[^\x00-\xff]/g,"**").length;
        },
        ClearState : function(elem){
                with(elem){
                        if(style.color == "red")
                                style.color = "";
                        var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
                        if(lastNode.id == "__ErrorMessagePanel")
                                parentNode.removeChild(lastNode);
                }
        },
        AddError : function(index, str){
                this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
                this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
        },
        Exec : function(op, reg){
                return new RegExp(reg,"g").test(op);
        },
        compare : function(op1,operator,op2){
                switch (operator) {
                        case "NotEqual":
                                return (op1 != op2);
                        case "GreaterThan":
                                return (op1 > op2);
                        case "GreaterThanEqual":
                                return (op1 >= op2);
                        case "LessThan":
                                return (op1 < op2);
                        case "LessThanEqual":
                                return (op1 <= op2);
                        default:
                                return (op1 == op2);            
                }
        },
        MustChecked : function(name, min, max){
                var groups = document.getElementsByName(name);
                var hasChecked = 0;
                min = min || 1;
                max = max || groups.length;
                for(var i=groups.length-1;i>=0;i--)
                        if(groups[i].checked) hasChecked++;
                return min <= hasChecked && hasChecked <= max;
        },
        IsDate : function(op, formatString){
                formatString = formatString || "ymd";
                var m, year, month, day;
                switch(formatString){
                        case "ymd" :
                                m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$"));
                                if(m == null ) return false;
                                day = m[6];
                                month = m[5]--;
                                year =  (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
                                break;
                        case "dmy" :
                                m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$"));
                                if(m == null ) return false;
                                day = m[1];
                                month = m[3]--;
                                year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
                                break;
                        default :
                                break;
                }
                if(!parseInt(month)) return false;
                month = month==12 ?0:month;
                var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
                function GetFullYear(y){return ((y<30 ? "20" : "19") + y)|0;}
        }
}
</script>
四、漂亮的脚本日历
复制内容到剪贴板
代码:
<Script LANGUAGE="JavaScript">
var months = new Array("一", "二", "三","四", "五", "六", "七", "八", "九","十", "十一", "十二");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);
var days = new Array("日","一", "二", "三","四", "五", "六");
var classTemp;
var today=new getToday();
var year=today.year;
var month=today.month;
var newCal;
function getDays(month, year) {
  if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
  else return daysInMonth[month];
}
function getToday() {
  this.now = new Date();
  this.year = this.now.getFullYear();
  this.month = this.now.getMonth();
  this.day = this.now.getDate();
}
function Calendar() {
  newCal = new Date(year,month,1);
  today = new getToday();   
  var day = -1;
  var startDay = newCal.getDay();
  var endDay=getDays(newCal.getMonth(), newCal.getFullYear());
  var daily = 0;
  if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth()))
  {
   day = today.day;
  }
  var caltable = document.all.caltable.tBodies.calendar;
  var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());
  for (var intWeek = 0; intWeek < caltable.rows.length;intWeek++)
   for (var intDay = 0;intDay < caltable.rows[intWeek].cells.length;intDay++)
   {
    var cell = caltable.rows[intWeek].cells[intDay];
    var montemp=(newCal.getMonth()+1)<10?("0"+(newCal.getMonth()+1)):(newCal.getMonth()+1);         
    if ((intDay == startDay) && (0 == daily)){ daily = 1;}
    var daytemp=daily<10?("0"+daily):(daily);
    var d="<"+newCal.getFullYear()+"-"+montemp+"-"+daytemp+">";
    if(day==daily) cell.className="DayNow";
    else if(intDay==6) cell.className = "DaySat";
    else if (intDay==0) cell.className ="DaySun";
    else cell.className="Day";
    if ((daily > 0) && (daily <= intDaysInMonth))
    {
     cell.innerText = daily;
     daily++;
    } else
    {
     cell.className="CalendarTD";
     cell.innerText = "";
    }
  }
  document.all.year.value=year;
  document.all.month.value=month+1;
}
function subMonth()
{
  if ((month-1)<0)
  {
   month=11;
   year=year-1;
  } else
  {
   month=month-1;
  }
  Calendar();
}
function addMonth()
{
  if((month+1)>11)
  {
   month=0;
   year=year+1;
  } else
  {
   month=month+1;
  }
  Calendar();
}
function setDate()
{
  if (document.all.month.value<1||document.all.month.value>12)
  {
   alert("月的有效范围在1-12之间!");
   return;
  }
  year=Math.ceil(document.all.year.value);
  month=Math.ceil(document.all.month.value-1);
  Calendar();
}
</Script>
<Script>
function buttonOver()
{
var obj = window.event.srcElement;
obj.runtimeStyle.cssText = "background-color:#FFFFFF";
// obj.className="Hover";
}
function buttonOut()
{
var obj = window.event.srcElement;
window.setTimeout(function(){obj.runtimeStyle.cssText = "";},300);
}
</Script>
<Style>
Input {font-family: verdana;font-size: 9pt;text-decoration: none;background-color: #FFFFFF;height: 20px;border: 1px solid #666666;color:#000000;}
.Calendar {font-family: verdana;text-decoration: none;width: 170;background-color: #C0D0E8;font-size: 9pt;border:0px dotted #1C6FA5;}
.CalendarTD {font-family: verdana;font-size: 7pt;color: #000000;background-color:#f6f6f6;height: 20px;width:11%;text-align: center;}
.Title {font-family: verdana;font-size: 11pt;font-weight: normal;height: 24px;text-align: center;color: #333333;text-decoration: none;background-color: #A4B9D7;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-bottom-style:1px;border-top-color: #999999;border-right-color: #999999;border-bottom-color: #999999;border-left-color: #999999;}
.Day {font-family: verdana;font-size: 7pt;color:#243F65;background-color: #E5E9F2;height: 20px;width:11%;text-align: center;}
.DaySat {font-family: verdana;font-size: 7pt;color:#FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DaySun {font-family: verdana;font-size: 7pt;color: #FF0000;text-decoration: none;background-color:#E5E9F2;text-align: center;height: 18px;width: 12%;}
.DayNow {font-family: verdana;font-size: 7pt;font-weight: bold;color: #000000;background-color: #FFFFFF;height: 20px;text-align: center;}
.DayTitle {font-family: verdana;font-size: 9pt;color: #000000;background-color: #C0D0E8;height: 20px;width:11%;text-align: center;}
.DaySatTitle {font-family: verdana;font-size: 9pt;color:#FF0000;text-decoration: none;background-color:#C0D0E8;text-align: center;height: 20px;width: 12%;}
.DaySunTitle {font-family: verdana;font-size: 9pt;color: #FF0000;text-decoration: none;background-color: #C0D0E8;text-align: center;height: 20px;width: 12%;}
.DayButton {font-family: Webdings;font-size: 9pt;font-weight: bold;color: #243F65;cursor:hand;text-decoration: none;}
</Style>
<table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable">
<thead>
     <tr align="center" valign="middle">
  <td colspan="7" class="Title">
   <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" type="text" size="4" maxlength="4" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" type="text" size="1" maxlength="2" onkeydown="if (event.keyCode==13){setDate()}" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"  onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a>
  </td>
</tr>
<tr align="center" valign="middle">
  <Script LANGUAGE="JavaScript">  
   document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>");
   for (var intLoop = 1; intLoop < days.length-1;intLoop++)
    document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>");
    document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>");
  </Script>
</TR>
</thead>
<TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()">
<Script LANGUAGE="JavaScript">
  for (var intWeeks = 0; intWeeks < 6; intWeeks++)
  {
   document.write("<TR style='cursor:hand'>");
   for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>");
   document.write("</TR>");
  }
</Script>
</TBODY>
</TABLE>
<Script  LANGUAGE="JavaScript">
Calendar();
</Script>
我只是一个大侠!

TOP

五、DIV_圆边圆角的实现
复制内容到剪贴板
代码:
<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
六、跳动的菜单
复制内容到剪贴板
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">
<!--
a:link,a:visited    { text-decoration: none; color: #666666 }
a:hover            { text-decoration: underline }
#hor1 {
    position:absolute;
    left:320px;
    top:20px;
    width:220px;
    height:20px;
    z-index:1;
    background-color: #999900;
}
#hor2 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:20px;
    z-index:2;
    background-color: #FFCC00;
}
#hor3 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:20px;
    z-index:3;
    background-color: #99CC00;
}
#board1 {
    position:absolute;
    left:320px;
    top:40px;
    width:220px;
    height:120px;
    z-index:-100;
    background-color: #333333;
    visibility: hidden;
}
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: bold;
}
body {
    background-color: #666666;
}
#board2 {
    position:absolute;
    left:320px;
    top:60px;
    width:220px;
    height:120px;
    z-index:-90;
    background-color: #333333;
    visibility: hidden;
}
#board3 {
    position:absolute;
    width:220px;
    height:120px;
    z-index:-80;
    left: 320px;
    top: 80px;
    background-color: #333333;
    visibility: hidden;
}
#hor4 {
    position:absolute;
    left:320px;
    top:80px;
    width:220px;
    height:20px;
    z-index:4;
    background-color: #99CCCC;
}
#board4 {
    position:absolute;
    left:320px;
    top:100px;
    width:220px;
    height:120px;
    z-index:-70;
    background-color: #333333;
    visibility: hidden;
}
-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}
</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足?<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗?<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库?</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球?</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a>
<a href="http://www.gamvan.com" target="_blank">http://www.gamvan.com</a></div>
</body>
</html>
我只是一个大侠!

TOP

七、经典的带阴影的可拖动的浮动层
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
  //Copyright 1998 Macromedia, Inc. All rights reserved.
  var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
  var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
  retVal = true; if(IE && event) event.returnValue = true;
  if (MM_dragLayer.arguments.length > 1) {
    curDrag = MM_findObj(objName); if (!curDrag) return false;
    if (!document.allLayers) { document.allLayers = new Array();
      with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
        for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
          with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
      } else {
        if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
          for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
        for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
    } }
    curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
    curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
    curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
    curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
    curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
    curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
    curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
    if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
    curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
    if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
    curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
    curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
    curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
    document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
    if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  } else {
    var theEvent = ((NS)?objName.type:event.type);
    if (theEvent == 'mousedown') {
      var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null; document.MM_maxZ = 0;
      for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
        var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
        if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
        var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
          var parentL=0; var parentT=0;
          if (NS6) { parentLayer = aLayer.parentNode;
            while (parentLayer != null && parentLayer.style.position) {            
              parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
              parentLayer = parentLayer.parentNode;
          } } else if (IE) { parentLayer = aLayer.parentElement;      
            while (parentLayer != null && parentLayer.style.position) {
              parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
              parentLayer = parentLayer.parentElement; } }
          var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
          var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
          if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
          var tmpW = MM_hWidth;  if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
          var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
          if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
              || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
      if (curDrag) {
        document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
        curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
        if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
        MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
        document.MM_curDrag = curDrag;  curDrag.MM_SNAPPED=false;
        if(curDrag.MM_toFront) {
          eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
          if (!curDrag.MM_dropBack) document.MM_maxZ++; }
        retVal = false; if(!NS4&&!NS6) event.returnValue = false;
    } } else if (theEvent == 'mousemove') {
      if (document.MM_curDrag) with (document.MM_curDrag) {
        var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
        if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
        if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
        if (MM_bT!=null) newTop  = Math.max(newTop ,MM_bT);
        if (MM_bB!=null) newTop  = Math.min(newTop ,MM_bB);
        MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
        if (NS4) {left = newLeft; top = newTop;}
        else if (NS6){style.left = newLeft; style.top = newTop;}
        else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
        if (MM_dragJS) eval(MM_dragJS);
        retVal = false; if(!NS) event.returnValue = false;
    } } else if (theEvent == 'mouseup') {
      document.onmousemove = null;
      if (NS) document.releaseEvents(Event.MOUSEMOVE);
      if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
      if (document.MM_curDrag) with (document.MM_curDrag) {
        if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
            (Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
             Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
          if (NS4) {left = MM_targL; top = MM_targT;}
          else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
          else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
          MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
        if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
        if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
        retVal = false; if(!NS) event.returnValue = false; }
      document.MM_curDrag = null;
    }
    if (NS) document.routeEvent(objName);
  } return retVal;
}
function loadwin(obj){
        with(MM_findObj(obj))with(style){
                filters[0].apply();
                display='';
                filters[0].play();
        }
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
        with(oldBody){
                var newBody=cloneNode();
                style.filter='blendtrans(duration=1)';
                filters[0].apply();
                with(document.styleSheets[0]){
                        with(rules[0].style){backgroundColor=captionBG;}
                        with(rules[1].style){backgroundColor=bodyBG;}
                        with(rules[2].style){backgroundColor=tableBG}
                }
                filters[0].play();
                setTimeout(function(){
                                if(oldBody!=null){
                                        oldBody.applyElement(newBody, "inside")
                                        oldBody.swapNode(newBody);
                                        oldBody.removeNode(true);
                                        }
                                },1500);
        }
}
//-->
</script>
<style type="text/css">
<!--
.caption {
        font-size: 9px;
        color: #FFFFFF;
        background-color: #00CCFF;
        padding-left: 5px;
        cursor: default;
        font-family: "Verdana", "Arial";
        border: 1px inset;
}
body {
        background-color: #f6f6f6;
        border: 1px inset;
        overflow: hidden;
}
table {
        background-color: #eeeeee;
}
td {
        font-family: "Verdana", "Arial";
        font-size: 9px;
        border: 0px;
}
.win {
        filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
}
a {
        text-decoration: none;
        color: #003399;
}
a:hover {
        color: #FF0000;
}
input {
        font-family: "Verdana", "Arial";
        font-size: 9px;
        border-width: 1px;
}
.statusbar {
        font-family: "Tahoma", "Verdana";
        font-size: 9px;
        color: #999999;
        padding-left: 3px;
}
.button {
        border: 1px outset;
        text-align: center;
}
.navframe {
        padding: 5px;
}
-->
</style>
</head>
<body>
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
                <table width="180" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                                <td class="caption">SeekAssist</td>
                                                <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
                                                <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
                                </tr>
                                <tr id="assistwin">
                                                <td height="100" colspan="3" bordercolor="#eeeeee">&nbsp;</td>
                                </tr>
  </table>
        <br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
                <table width="180" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                                <td class="caption">SeekRank</td>
                                                <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
                                                <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
                                </tr>
                                <tr id="rankwin">
                                                <td height="100" colspan="3" bordercolor="#eeeeee">&nbsp;</td>
                                </tr>
  </table>
                <br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
                <table width="180" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                                <td class="caption">MyColor</td>
                                                <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>