跟小D每日学口语

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 : http://www.lapuasi.com
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">‹</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 + ');">‹</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">›</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</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">‹</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 + ');">‹</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">›</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</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">‹</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 + ');">‹</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">›</span>';
                                strHtml += '<span title="Last Page">&raquo;</span>';
                        } else {
                                strHtml += '<span title="Next Page"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</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 编辑 ]

搜索更多相关主题的帖子: JavaScript 经典 效果 定义 New

我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
2# 大 中 小 发表于 2008-6-24 09:18  只看该作者
三、超级强大的表单验证
复制内容到剪贴板
代码:
<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]
        http://www.cunite.com
*************************************************/
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

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
3# 大 中 小 发表于 2008-6-24 09:19  只看该作者
五、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

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
4# 大 中 小 发表于 2008-6-24 09:20  只看该作者
七、经典的带阴影的可拖动的浮动层
复制内容到剪贴板
代码:
<!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>
                                                <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
                                </tr>
                                <tr id="mycolorwin">
                                                <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                                                                </tr>
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                                                                </tr>
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                                                                </tr>
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                                                                </tr>
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                                                                </tr>
                                                                <tr>
                                                                                <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                                                                </tr>
                                                </table></td>
                                </tr>
  </table>
                <br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
                <table width="570" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                <tr>
                                                                                                <td class="caption">Results</td>
                                                                                                <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                                                                                                <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                                                                                </tr>
                                                </table></td>
                                </tr>
                                <tr>
                                                <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
                                                <a href="#" onclick="mainframe.location=url.value">Search</a></td>
                                </tr>
                                <tr id="resultswin">
                                                <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
                                </tr>
                                <tr>
                                                <td height="14" class="statusbar">Ready!</td>
                        </tr>
  </table>
                <br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>
八、凹陷文字
复制内容到剪贴板
代码:
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.ismole.com/">www.ismole.com</a></font>
</div>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
5# 大 中 小 发表于 2008-6-24 09:22  只看该作者
九、美化列表
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
        font-family: verdana;
        font-size: 9pt;
}
h1
{
        font-family: tahoma;
        font-size: 22pt;
        text-align: left;
}
pre
{
        font-size: 9pt;
        font-family: verdana;
        border: 1px solid #006600;
        width: 400px;
        padding: 10px;
        background: #ffffff;
        color: #006600;
}
.CtlSelect
{
        border: 1px solid #006600;
        font-family: verdana;
        height: 20px;
        color: #006600;
        background: #ffffff;
        /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
        background: #006600;
        color: #ffffff;
        height: 20px;
}
.unselected
{
        height: 20px;
        color: #006600;
        line-height: 120%;
        border-bottom: 1px solid #006600;
}
.CtlSelect1
{
        border: 1px solid #003399;
        font-family: verdana;
        height: 20px;
        color: #003399;
        background: #ffffff;
        /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
        background: #003399;
        color: #ffffff;
        height: 20px;
}
.unselected1
{
        height: 20px;
        color: #003399;
        line-height: 120%;
        border-bottom: 1px solid #003399;
}
.CtlSelect2
{
        border: 1px solid #990000;
        font-family: verdana;
        height: 20px;
        color: #990000;
        background: #ffffff;
        /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
        background: #990000;
        color: #ffffff;
        height: 20px;
}
.unselected2
{
        height: 20px;
        color: #990000;
        line-height: 120%;
        border-bottom: 1px solid #990000;
}
.copyright
{
        margin-top: 10px;
        font-size: 9pt;
        text-align: center;
        color: #333;
        font-weight: bold;
}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ class: simulateSelect()
//
//  @ object.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ object.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ object.height=(heightPX)
//    heightPX must be a digit number.
//
//  @ object.getValue(ctlSelID)
//    ctlSelID is the unique select control ID
//
//  -------------- for the next Version ----------
//  @ object.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ object.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
function $(objID)
{
        return document.getElementById(objID);
};
function Offset(e)
{
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var w = e.offsetWidth;
        var h = e.offsetHeight-2;
        while(e=e.offsetParent)
        {
                t+=e.offsetTop;
                l+=e.offsetLeft;
        }
        return {
                top : t,
                left : l,
                width : w,
                height : h
        }
}
//-----------------------------------------------
function simulateSelect() { with(this)
{
        this.IDs = [];
        this.name = this;
        //  property for beta Version
        //  can editable combox
        this.readonly = true;
        this.height = 20;
        this.width = null;
        this.ctlStyle = "CtlSelect";
        this.selStyle = "selected";
        this.unselStyle = "unselected";
        this.elementPrefix = "e__";
        this.inputPrefix = "i__";
        this.containerPrefix = "c__";
        this.buttonPrefix = "b__";
        return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
        eval(name).append(ctlSelIDs);
        eval(name).simulates();
}};
simulateSelect.prototype.style = function() { with(this)
{
        ctlStyle = arguments[0];
        selStyle = arguments[1];
        unselStyle = arguments[2];
}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
        if( ctlSelIDs.indexOf(",")>0 )
        {
                var arrCtlSel = ctlSelIDs.split(",");
                for(var i=0; i<arrCtlSel.length; i++)
                {
                        eval(name).IDs.push(arrCtlSel[i]);
                }
        }
        else
        {
                eval(name).IDs.push(ctlSelIDs);
        }
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
        // here compatible mf.
        var el = e ? e.srcElement : e.target;
        if( el.id.indexOf(elementPrefix)>-1 ||
        el.id.indexOf(inputPrefix)>-1 ||
        el.id.indexOf(containerPrefix)>-1 ||
        el.id.indexOf(buttonPrefix)>-1 )
        {
                return;
        }
        else
        {
                for(var i=0; i<eval(name).IDs.length; i++)
                if( $(containerPrefix + IDs[i]) )
                $(containerPrefix + eval(name).IDs[i]).style.display = "none";
        }
}};
simulateSelect.prototype.simulates = function() { with(this)
{
        for(var i=0; i<IDs.length; i++)
        eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
        var input;
        var button;
        var object;
        var offset;
        object = $(ctlSelID);
        offset = Offset(object);
        input = document.createElement("INPUT");
        button = document.createElement("BUTTON");
        button.setAttribute("id", buttonPrefix + ctlSelID);
        //button.value = "⊿";
        button.value = "6";
        button.style.fontFamily = "Webdings, Marlett";
        button.style.background = "";
        button.onclick = input.onclick = function()
        {
                this.blur();
                eval(name).expand(ctlSelID, offset);
        }
        input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
        input.setAttribute("id", inputPrefix + ctlSelID);
        input.title = button.title = "click expand options";
        input.style.cursor = button.style.cursor = "default";
        input.className = button.className = ctlStyle;
        input.style.width = (width>0 ? width : object.offsetWidth);
        height ? input.style.height=button.style.height=height : "";
        input.value = object[0].text;
        if( readonly==true ) input.readOnly=true;
        // this method is only IE.
        object.insertAdjacentElement("afterEnd",button);
        object.insertAdjacentElement("afterEnd",input);
        object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
        var div, btn_off;
        var object = $(ctlSelID);
        if( !$(containerPrefix + ctlSelID) )
        {
                div = document.createElement("DIV");
                div.style.position = "absolute";
                div.style.display = "block";
                div.setAttribute("id", containerPrefix + ctlSelID);
                div.className = ctlStyle;
                div.style.left = offset.left;
                div.style.top = offset.top + offset.height;
                div.style.width = (width ? width : offset.width) + 20;
                div.style.height = offset.height;
                document.body.appendChild(div);
                for(var i=0; i<object.length; i++)
                {
                        div = document.createElement("DIV");
                        div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
                        div.style.cursor = "default";
                        if( object[i].text==$(inputPrefix + ctlSelID).value )
                        div.className = selStyle;
                        else
                        div.className = unselStyle;
                        div.innerText = div.title = object[i].text;
                        div.style.height = height;
                        div.setAttribute("value", object[i].value);
                        div.onmouseover = function()
                        {
                                for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
                                {
                                        if($(containerPrefix + ctlSelID).childNodes[j]==this)
                                        $(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
                                        else
                                        $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
                                }                                               
                        };
                        div.onclick = function()
                        {
                                $(inputPrefix + ctlSelID).value = this.innerText;
                                $(containerPrefix + ctlSelID).style.display = "none";
                        };
                        $(containerPrefix + ctlSelID).appendChild(div);
                }
                return;
        }
        if( $(containerPrefix + ctlSelID).style.display=="none" )
        {
                for(var i=0; i<object.length; i++)
                {
                        if( object[i].text==$(inputPrefix + ctlSelID).value )
                        $(elementPrefix + ctlSelID + i).className = selStyle;
                        else
                        $(elementPrefix + ctlSelID + i).className = unselStyle;
                }
                $(containerPrefix + ctlSelID).style.display="block";
                return;
        }
        if( $(containerPrefix + ctlSelID).style.display=="block" )
        {
                $(containerPrefix + ctlSelID).style.display="none";
                return;
        }
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
        if( $(inputPrefix + ctlSelID) )
        return $(inputPrefix + ctlSelID).value;
        else
        return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
//  IE only.
document.attachEvent("onmousedown", function() {
                                                a.checkupOnMouseDown(event);
                                                b.checkupOnMouseDown(event);
                                                c.checkupOnMouseDown(event)
                                                }
                                        );
//-->
</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>
<p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>
<p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>
<p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p>
<p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>
<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>
<SCRIPT LANGUAGE="JavaScript">
<!--
        var a = new simulateSelect();
        a.style("CtlSelect", "selected", "unselected");
        a.init("s1");
        var b = new simulateSelect();
        b.style("CtlSelect1", "selected1", "unselected1");
        b.width = 300;
        b.init("s2");
        var c = new simulateSelect();
        c.style("CtlSelect2", "selected2", "unselected2");
        c.width = 320;
        c.init("s3");
//-->
</SCRIPT>
<h4> description </h4>
<pre>
//-------------------------------------------------------------
//  @ Module: simulate select control, IE only.
//  @ Debug in: IE 6.0
//  @ Script by: blueDestiny, never-online
//  @ Updated: 2006-3-22
//  @ Version: 1.0 apha
//  @ Email: blueDestiny [at] 126.com
//  @ Website: http://www.never-online.net
//  @ Please Hold this item please.
//
//  API
//  @ simulateSelect(ctlSelIDs)
//    ctlSelIDs: select control IDs, split by ","
//
//  @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
//    ctlStyle: main control combox css class name
//    selStyle: when mouseover or option focus css class name
//    unselStyle: options blur's css class name
//
//  @ simulateSelect.width=(widthPX)
//    widthPX must be a digit number.
//
//  @ simulateSelect.height=(heightPX)
//    heightPX must be a digit number.
//
//  -------------- for the next Version ----------
//  @ simulateSelect.readOnly = (blnReadOnly)
//    blnReadOnly must be a boolean type or a number type.
//  @ simulateSelect.addEvent(w, h)
//    w: fire handler's event.
//    h: handler function.
//-------------------------------------------------------------
</pre>
<div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>
</BODY>
</HTML>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
6# 大 中 小 发表于 2008-6-24 09:22  只看该作者
十、将HTML自动转为JS代码
复制内容到剪贴板
代码:
<script>
function toScript(val)
{
var value = val.value
value  = value.replace(/\\/gi,"\\\\").replace(/"/gi,"\\\"").replace(/'/gi,"\\\'")
valArr = value.split("\r\n")
value=""

for (i=0; i<valArr.length; i++)
{
  value += (i==0) ? "info =" : ""
  value += "  \"" + valArr[i]
  value += (i!=valArr.length-1) ? "\" +\"\\n\"+\n" : "\"\n"
}
value+="\ndocument.write(info)"

val.value = value
}
</script>
<input type=button value="将 HTML 转为 JavaScript" onclick=toScript(document.all["code"])><br>
<textarea id=code cols=75 rows=20>
<table width="300">
<tr><td align="right">A</td></tr>
</table></textarea>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
7# 大 中 小 发表于 2008-6-24 09:26  只看该作者
十一、用层模拟可移动的小窗口
复制内容到剪贴板
代码:
<html>
<head>
<title>_xWin</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="http://www.xuemu.net">
<style type='text/css'>
<!--
body{font-size:12px;}
a:visited{text-decoration:none;color:slategray;}
a:hover{text-decoration:underline;color:slategray;}
a:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=JScript>
<!--
//可以打包为js文件;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var moveable=false;
var hover='orange',normal='#336699';//color;
var index=10000;//z-index;
//开始拖动;
function startDrag(obj)
{
if(event.button==1)
{
//锁定标题栏;
obj.setCapture();
//定义对象;
var win = obj.parentNode;
var sha = win.nextSibling;
//记录鼠标和层位置;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.style.left);
y1 = parseInt(win.style.top);
//记录颜色;
normal = obj.style.backgroundColor;
//改变风格;
obj.style.backgroundColor = hover;
win.style.borderColor = hover;
obj.nextSibling.style.color = hover;
sha.style.left = x1 + offx;
sha.style.top = y1 + offy;
moveable = true;
}
}
//拖动;
function drag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
sha.style.left = parseInt(win.style.left) + offx;
sha.style.top = parseInt(win.style.top) + offy;
}
}
//停止拖动;
function stopDrag(obj)
{
if(moveable)
{
var win = obj.parentNode;
var sha = win.nextSibling;
var msg = obj.nextSibling;
win.style.borderColor = normal;
obj.style.backgroundColor = normal;
msg.style.color = normal;
sha.style.left = obj.parentNode.style.left;
sha.style.top = obj.parentNode.style.top;
obj.releaseCapture();
moveable = false;
}
}
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
obj.nextSibling.style.zIndex=idx-1;
}
}
//最小化;
function min(obj)
{
var win = obj.parentNode.parentNode;
var sha = win.nextSibling;
var tit = obj.parentNode;
var msg = tit.nextSibling;
var flg = msg.style.display=="none";
if(flg)
{
win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
msg.style.display = "block";
obj.innerHTML = "0";
}
else
{
win.style.height = parseInt(tit.style.height) + 2*2;
sha.style.height = win.style.height;
obj.innerHTML = "2";
msg.style.display = "none";
}
}
//创建一个对象;
function xWin(id,w,h,l,t,tit,msg)
{
index = index+2;
this.id = id;
this.width = w;
this.height = h;
this.left = l;
this.top = t;
this.zIndex = index;
this.title = tit;
this.message = msg;
this.obj = null;
this.bulid = bulid;
this.bulid();
}
//初始化;
function bulid()
{
var str = ""
+ "<div id=xMsg" + this.id + " "
+ "style='"
+ "z-index:" + this.zIndex + ";"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "left:" + this.left + ";"
+ "top:" + this.top + ";"
+ "background-color:" + normal + ";"
+ "color:" + normal + ";"
+ "font-size:8pt;"
+ "font-family:Tahoma;"
+ "position:absolute;"
+ "cursor:default;"
+ "border:2px solid " + normal + ";"
+ "' "
+ "onmousedown='getFocus(this)'>"
+ "<div "
+ "style='"
+ "background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "height:20;"
+ "color:white;"
+ "' "
+ "onmousedown='startDrag(this)' "
+ "onmouseup='stopDrag(this)' "
+ "onmousemove='drag(this)' "
+ "ondblclick='min(this.childNodes[1])'"
+ ">"
+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"
+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
+ "</div>"
+ "<div style='"
+ "width:100%;"
+ "height:" + (this.height-20-4) + ";"
+ "background-color:white;"
+ "line-height:14px;"
+ "word-break:break-all;"
+ "padding:3px;"
+ "'>" + this.message + "</div>"
+ "</div>"
+ "<div id=xMsg" + this.id + "bg style='"
+ "width:" + this.width + ";"
+ "height:" + this.height + ";"
+ "top:" + this.top + ";"
+ "left:" + this.left + ";"
+ "z-index:" + (this.zIndex-1) + ";"
+ "position:absolute;"
+ "background-color:black;"
+ "filter:alpha(opacity=40);"
+ "'></div>";
document.body.insertAdjacentHTML("beforeEnd",str);
}
//显示隐藏窗口
function ShowHide(id,dis){
var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
document.getElementById("xMsg"+id).style.display = bdisplay;
document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
}
//-->
</script>
<script language='JScript'>
<!--
function initialize()
{
var a = new xWin("1",160,200,200,200,"窗口1","xWin <br> A Cool Pop Div Window<br>XueMu.Net<br>2006-5-13");
var b = new xWin("2",240,200,100,100,"窗口2","Welcome to visited my personal website:<br><a href=http://www.xuemu.net target=_blank>http://www.xuemu.net</a><br>请多提建议噢<br><br>感谢您的关注！");
var c = new xWin("3",200,160,250,50,"窗口3","Copyright by <a href='#'>Wildwind</a>!");
ShowHide("1","none");//隐藏窗口1
}
window.onload = initialize;
//-->
</script>
</head>
<base target="_blank">
<body onselectstart='return false' oncontextmenu='return false' >
<a onclick="ShowHide('1',null);return false;" href="">窗口1</a>
<a onclick="ShowHide('2',null);return false;" href="">窗口2</a>
<a onclick="ShowHide('3',null);return false;" href="">窗口3</a>
</body>
</html>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
8# 大 中 小 发表于 2008-6-24 09:26  只看该作者
十二、一个模仿图片透明渐变做的表格颜色渐变效果
复制内容到剪贴板
代码:
<HTML>
<HEAD>
<TITLE>dancepower.cn</TITLE>
<SCRIPT language=JavaScript>
// Flash table Extension for Dreamwever ,by dio([email]diopex@sina.com[/email])
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        return;
    }
    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff = destOp-object.filters.alpha.opacity;
    direction = 1;
    if (object.filters.alpha.opacity > destOp){
        direction = -1;
    }
    delta=Math.min(direction*diff,delta);
    object.filters.alpha.opacity+=direction*delta;
    if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]=object;
        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</SCRIPT>
</HEAD>
<BODY text=#000000 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%" border=0>
  <TBODY>
  <TR>
    <TD align=center>
      <TABLE borderColor=#ffffff height=100 cellSpacing=1 cellPadding=1
      width=100 align=center bgColor=#000033 border=1>
        <TBODY>
        <TR align=center>
          <TD onmouseover=nereidFade(this,100,10,5)
          style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)
          bgColor=#00ccff><FONT face=verdana color=#ffffff
size=1>dio</FONT></TD>
          <TD onmouseover=nereidFade(this,100,10,5)
          style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)
          bgColor=#ff9900><FONT face=verdana color=#ffffff
        size=1>pex</FONT></TD></TR>
        <TR align=center>
          <TD onmouseover=nereidFade(this,100,10,5)
          style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)
          bgColor=#ff3399><FONT face=verdana color=#ffffff
size=1>pex</FONT></TD>
          <TD onmouseover=nereidFade(this,100,10,5)
          style="FILTER: alpha(opacity=70)" onmouseout=nereidFade(this,50,10,5)
          bgColor=#33ff66><FONT face=verdana color=#ffffff
        size=1>dio</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></BODY></HTML>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
9# 大 中 小 发表于 2008-6-24 09:27  只看该作者
十三、来访统计
<script language="JavaScript">
    <!--
    var caution = false
    function setCookie(name, value, expires, path, domain, secure) {
    var curCookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "")
    if (!caution || (name + "=" + escape(value)).length <= 4000)
    document.cookie = curCookie
    else
    if (confirm("Cookie exceeds 4KB and will be cut!"))
    document.cookie = curCookie
    }
    function getCookie(name) {
    var prefix = name + "="
    var cookieStartIndex = document.cookie.indexOf(prefix)
    if (cookieStartIndex == -1)
    return null
    var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length)
    if (cookieEndIndex == -1)
    cookieEndIndex = document.cookie.length
    return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex))
    }
    function deleteCookie(name, path, domain) {
    if (getCookie(name)) {
    document.cookie = name + "=" +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT"
    }
    }
    function fixDate(date) {
    var base = new Date(0)
    var skew = base.getTime()
    if (skew > 0)
    date.setTime(date.getTime() - skew)
    }
    var now = new Date()
    fixDate(now)
    now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000)
    var visits = getCookie("counter")
    if (!visits)
    visits = 1
    else
    visits = parseInt(visits) + 1
    setCookie("counter", visits, now)
    document.write("帅哥,欢迎您的第" + visits + "次光临！")
    // -->
    </script>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
10# 大 中 小 发表于 2008-6-24 09:30  只看该作者
十四、css模拟title和alt的提示效果
复制内容到剪贴板
代码:
<style>
.info {position:relative;background:#fff;color:#666; text-decoration:none;font-size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
.info:hover {background:#eee;color:#333;}
.info span {display: none }/*设置正常下的span为隐藏状态*/
.info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/{display:block;position:absolute;top:30px;left:60px;width:130px;
border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
</style>
<body>
<a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
<a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
<a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
<a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
<a class="info" href="http://www.ismole.net">http://www.ismole.net<span>这是我们公司的论坛，里面有很多精彩的东东哦!欢迎大家常来交流</span></a>
</body>
十五、功能强大的旋转导航文字圈
复制内容到剪贴板
代码:
<body>
<style type="text/css">
BODY
{
background : #efefef;
font : 12px Verdana;
}
A { color : #e70 }
A:hover { text-decoration : none }
.spin
{
position : absolute;
visibility : hidden;
z-index : auto;
}
.spin A
{
font : 12px Verdana;
text-decoration : none;
}
.spin A:hover
{
text-decoration : underline overline;
}
</style>
<script language="JavaScript1.2">
function getPageSize()
{
        this.x = document.getElementsByTagName('html').item(0).clientWidth||document.getElementsByTagName('html').item(0).offsetWidth||document.body.offsetWidth||innerWidth
        this.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeight
        this.x2 = parseInt(this.x/2)||0
        this.y2 = parseInt(this.y/2)||0
        this.sx = document.body.scrollWidth||0
        this.sy = document.body.scrollHeight||0
}
var pg
var pi = 3.1415
function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx)
{
        pg = new getPageSize()
        this.cls = cls
        this.rad = rad
        this.eSpd = eSpd
        this.rSpd = rSpd
        this.dir = dir ? 1 : -1
        this.x = x<0 ? pg.x2 : x
        this.y = y<0 ? pg.y2 : y
        this.runEx = runEx||0
        this.noCt = noCt||0
        this.r = 0 // radius flux
        this.ex = 0 // expand timeout
        this.ct = 0 // contract timeout
        this.rt = 1 // rotate timeout
        this.vis = 0 // visibility
        this.rNum = 0 // rotational flux
        this.rSpd2 = 0 // rSpd holder
        this.exDone = 0 // expand complete?
        this.ctDone = 1 // contract complete?
        this.toFig = 0
        this.atX = 0
        this.atY = 0
        this.url = 0
        this.target = 0
        eval(this.obj + "=this")
        this.items = new Array()
        this.el = document.getElementsByTagName('div')
        for(i=0;(this.el.item(i));i++)
        {
                if(this.el.item(i).className==this.cls)
                {
                        this.el.item(i).onmouseover = new Function(this.obj+'.stop()')
                        this.el.item(i).onmouseout = new Function(this.obj+'.rotate()')
                        this.el.item(i).onclick = new Function(this.obj+'.contract()')
                        this.items[this.items.length] = this.el.item(i)
                }
        }
        delete this.el
        for(i=0;(this.items[i]);i++)
        {
                if(!this.items[i].childNodes.item(0).nodeValue)
                {
                        this.items[i].childNodes.item(0).onmouseover = new Function('status=this.href;return true')
                        this.items[i].childNodes.item(0).onmouseout = new Function('status=\'\';return true')
                        this.items[i].childNodes.item(0).onclick = new Function(this.obj+'.setURL(this.href,this.target);return false')
                        this.items[i].childNodes.item(0).onfocus = new Function('this.blur()')
                }
        }
        return this
}
spinMenu.prototype.init = function()
{
        this.hide()
        this.place()
        this.expand()
}
spinMenu.prototype.rotate = function()
{
        if(this.rSpd)
        {
                this.rNum += pi/(1000/this.rSpd)*this.dir
                if(this.exDone)
                {
                        this.place()
                        clearTimeout(this.rt)
                        this.rt = setTimeout(this.obj+'.rotate()',20)
                }
        }
}
spinMenu.prototype.stop = function()
{
        clearTimeout(this.rt)
        this.rt = 0
}
spinMenu.prototype.expand = function()
{
        if(this.exDone!=1)
        {
                this.ctDone=0
                if(!this.vis) this.show()
                if(this.runEx) eval(this.runEx)
                if(this.ct!=0)
                {
                        clearTimeout(this.ct)
                        this.ct = 0
                }
                if(this.r<this.rad)
                {
                        this.r += this.eSpd
                        if(this.rSpd2==0) this.rSpd2 = this.rSpd
                        this.rSpd = this.eSpd*3
                        this.rotate()
                        this.place()
                        this.ex = setTimeout(this.obj+'.expand()',10)
                }
                else
                {
                        this.ex = 0
                        this.rSpd = this.rSpd2
                        this.rSpd2 = 0
                        this.ctDone = 0
                        this.exDone = 1
                        this.rotate()
                }
        }
}
spinMenu.prototype.contract = function()
{
        if(this.ctDone!=1&&!this.noCt)
        {
                this.exDone = 0
                if(this.ex!=0)
                {
                        clearTimeout(this.ex)
                        this.ex = 0
                }
                if(this.r>0)
                {
                        this.r -= this.eSpd
                        if(this.rSpd2==0) this.rSpd2 = this.rSpd
                        this.rSpd = this.eSpd
                        this.rotate()
                        this.place()
                        this.ct = setTimeout(this.obj+'.contract()',10)
                }
                else
                {
                        this.rSpd = this.rSpd2
                        this.rSpd2 = 0
                        this.rNum = 0
                        this.stop()
                        this.hide()
                        this.exDone = 0
                        this.ctDone = 1
                        this.goURL()
                }
        }
        else this.goURL()
}
spinMenu.prototype.place = function()
{
        for(i=0;(this.items[i]);i++)
        {
                this.atPt(i)
                this.items[i].style.left = this.atX-(this.items[i].offsetWidth/2)+'px'
                this.items[i].style.top = this.atY-(this.items[i].offsetHeight/2)+'px'
        }
}
spinMenu.prototype.atPt = function(pt)
{
        this.toFig = pi/(this.items.length/2)*(pt+this.rNum)
        this.atX = parseInt(Math.cos(this.toFig)*this.r+this.x)
        this.atY = parseInt(Math.sin(this.toFig)*this.r+this.y)
}
spinMenu.prototype.show = function()
{
        for(i=0;(this.items[i]);i++)
        {
                this.items[i].style.display = 'block'
                this.items[i].style.visibility = 'visible'
                this.vis = 1
        }
}
spinMenu.prototype.hide = function()
{
        for(i=0;(this.items[i]);i++)
        {
                this.items[i].style.visibility = 'hidden'
                this.items[i].style.display = 'none'
                this.vis = 0
        }
}
spinMenu.prototype.changeDir = function()
{
        this.dir = this.dir==1 ? -1 : 1
}
spinMenu.prototype.setURL = function(url,target)
{
        this.url = url
        this.target = target
}
spinMenu.prototype.goURL = function()
{
        if(this.url)
        {
                if(!this.target)
                        if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).target
                if(this.target)
                {
                        if(this.target=='_blank') open(this.url)
                        else if(this.target=='_parent') parent.location = this.url
                        else if(this.target=='_top') top.location = this.url
                        else if(this.target.indexOf('_')<0)
                        {
                                if(eval('parent.'+this.target)) eval('parent.'+this.target+'.document.location=this.url')
                                else if(eval('top.'+this.target)) eval('top.'+this.target+'.document.location=this.url')
                                else open(this.url,this.target)
                        }
                        else location = this.url
                }
                else location = this.url
                this.url = 0
        }
}
</script>
<script language="JavaScript1.2" type="text/javascript">
function centerIt()
{
pg = new getPageSize()
menu.x = pg.x2-10
menu.y = pg.y2
}
function initSpinMenu()
{
menu = new spinMenu(
'spin', // className
120, // radius
12, // expand/contract speed
3, // rotational speed
1, // direction (cw=1,ccw=0)
-1, // origin x
-1, // origin y
0, // stay expanded?
0 // run before expand
)
menu.init()
}
onload=initSpinMenu
onresize=centerIt
</script>
<base target="newWin">
<div align="right"><a href="javascript:menu.expand()" target="_self">展开</a> | <a href="javascript:menu.contract()" target="_self">隐藏</a> | <a href="javascript:menu.stop()" target="_self">停止</a> | <a href="javascript:menu.rotate()" target="_self">旋转</a> | <a href="javascript:menu.changeDir()" target="_self">改变旋转方向</a></div>
<div class="spin"><a href="http://www.butong.net">网页特效库</a></div>
<div class="spin"><a href="http://www.butong.net/background/index.htm">背景特效</a></div>
<div class="spin"><a href="http://www.butong.net/moban/index.htm">整站模板</a></div>
<div class="spin"><a href="http://www.butong.net/navigation/index.htm">导航特效</a></div>
<div class="spin"><a href="http://www.butong.net/time/index.htm">时间特效</a></div>
<div class="spin"><a href="http://www.butong.net/img/index.htm">图象特效</a></div>
<div class="spin"><a href="http://www.butong.net/text/index.htm">文本特效</a></div> </body>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
12# 大 中 小 发表于 2008-6-24 10:13  只看该作者
十六、网页左侧隐藏导航菜单~
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0046)http://vip.aou.cn/csqf/new_page_3.htm -->
<HTML><HEAD><TITLE>New Page 28</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1491" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<STYLE>#ssm2 A {
FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
#ssm2 A:hover {
COLOR: #ccff33
}
body{background:url() no-repeat right center fixed;}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language=JavaScript1.2>
function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}
function highlight(x){
document.forms[x].elements[0].focus()
document.forms[x].elements[0].select()
}
function MM_jumpMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
var NS
IE=document.all;
NS=document.layers;
hdrFontFamily="Verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#CCCCCC";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#CCCCCC";
linkTarget="_top";
YOffset=60;
staticYOffset=20;
menuBGColor="#CCCCCC";
menuIsStatic="no";
menuHeader="Main Index"
menuWidth=150; // Must be a multiple of 5!
staticMode="advanced"
barBGColor="#C0C0C0";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barText="MENU";
function moveOut() {
if (window.cancel) {
cancel="";
}
if (window.moving2) {
clearTimeout(moving2);
moving2="";
}
if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
}
if (NS) {
document.ssm2.left += (5%menuWidth);
}
moving1 = setTimeout('moveOut()', 5)
}
else {
clearTimeout(moving1)
}
};
function moveBack() {
cancel = moveBack1()
}
function moveBack1() {
if (window.moving1) {
clearTimeout(moving1)
}
if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
}
if (NS) {
document.ssm2.left -= (5%menuWidth);
}
moving2 = setTimeout('moveBack1()', 5)}
else {
clearTimeout(moving2)
}
};
lastY = 0;
function makeStatic(mode) {
if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
}
if (NS) {winY = window.pageYOffset;var NM=document.ssm2
}
if (mode=="smooth") {
if ((IE||NS) && winY!=lastY) {
smooth = .2 * (winY - lastY);
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) NM.pixelTop+=smooth;
if (NS) NM.top+=smooth;
lastY = lastY+smooth;
}
setTimeout('makeStatic("smooth")', 1)
}
else if (mode=="advanced") {
if ((IE||NS) && winY>YOffset-staticYOffset) {
if (IE) {NM.pixelTop=winY+staticYOffset
}
if (NS) {NM.top=winY+staticYOffset
}
}
else {
if (IE) {NM.pixelTop=YOffset
}
if (NS) {NM.top=YOffset-7
}
}
setTimeout('makeStatic("advanced")', 1)
}
}
function init() {
if (IE) {
ssm2.style.pixelLeft = -menuWidth;
ssm2.style.visibility = "visible"
}
else if (NS) {
document.ssm2.left = -menuWidth;
document.ssm2.visibility = "show"
}
else {
alert('Choose either the "smooth" or "advanced" static modes!')
}
}
function MM_displayStatusMsg(msgStr) {
status=msgStr;
document.MM_returnValue = true;
}
</SCRIPT>
<SCRIPT language=JavaScript1.2>
if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
tempBar=""
for (i=0;i<barText.length;i++) {
tempBar+=barText.substring(i, i+1)+"<BR>"}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
function addItem(text, link, target) {
if (!target) {target=linkTarget}
document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
function addHdr(text) {
document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}
//Only edit the script between HERE
addItem('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', '');
addItem('聆听心海', 'http://vip.aou.cn/csqf/linting.htm', '');
addItem('风言风语', 'http://vip.aou.cn/csqf/fyfy.htm', '');
addItem('风行风影', 'http://vip.aou.cn/csqf/fxfy.htm', '');
addItem('雁过留声', 'http://csqf.etp21.com/', '_blank');
addHdr('WELCOME TO');
addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank');
// and HERE! No more!
document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
if (IE) {document.write('</DIV>')}
if (NS) {document.write('</LAYER>')}
if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}
</SCRIPT>
<SCRIPT>
window.onload=init
</SCRIPT>
<p style="height:1000px;"></p>
</BODY></HTML>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
13# 大 中 小 发表于 2008-6-24 10:16  只看该作者
十七、焦点图片模糊变化切换效果
复制内容到剪贴板
代码:
<script language="JavaScript1.1">
<!--
var slidespeed=3000
var slideimages=new Array("http://www.makewing.com/lanren/jscode/js-0079/images/01.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/02.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/03.jpg","http://www.makewing.com/lanren/jscode/js-0079/images/04.jpg")
var slidelinks=new Array("#","#","#","#")

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}
//-->
</script>
<a href="javascript:gotoshow()"><img src="photo/200202261.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></a>
<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie55) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()
//-->
</script>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
14# 大 中 小 发表于 2008-6-24 10:18  只看该作者
十八、框架自定义
复制内容到剪贴板
代码:
<!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>框架自定义拖拽</title>
<style>
body {
        margin:0px;
        padding:0px;
        font-size:12px;
        text-align:center;
}
body > div {
        text-align:center;
        margin-right:auto;
        margin-left:auto;
}
.content {
        width:900px;
}
.content .left {
        float:left;
        width:20%;
        border:1px solid #FF0000;
        margin:3px;
}
.content .center {
        float:left;
        border:1px solid #FF0000;
        margin:3px;
        width:57%
}
.content .right {
        float:right;
        width:20%;
        border:1px solid #FF0000;
        margin:3px
}
.mo {
        height:auto;
        border:1px solid #CCC;
        margin:3px;
        background:#FFF
}
.mo h1 {
        background:#ECF9FF;
        height:18px;
        padding:3px;
        cursor:move
}
.mo .nr {
        height:80px;
        border:1px solid #F3F3F3;
        margin:2px
}
h1 {
        margin:0px;
        padding:0px;
        text-align:left;
        font-size:12px
}
</style>
<script>
var dragobj={}
window.onerror=function(){return false}
function on_ini(){
String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
var agent=navigator.userAgent
window.isOpr=agent.inc("Opera")
window.isIE=agent.inc("IE")&&!isOpr
window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
if(isMoz){
  Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
  Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
}
basic_ini()
}
function basic_ini(){
window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
}
window.onload=function(){
on_ini()
var o=document.getElementsByTagName("h1")
for(var i=0;i<o.length;i++){
  o[i].onmousedown=function(e){
   if(dragobj.o!=null)
    return false
   e=e||event
   dragobj.o=this.parentNode
   dragobj.xy=getxy(dragobj.o)
   dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
   dragobj.o.style.width=dragobj.xy[2]+"px"
   dragobj.o.style.height=dragobj.xy[3]+"px"
   dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
   dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"   
   dragobj.o.style.position="absolute"
   var om=document.createElement("div")
   dragobj.otemp=om
   om.style.width=dragobj.xy[2]+"px"
   om.style.height=dragobj.xy[3]+"px"
   dragobj.o.parentNode.insertBefore(om,dragobj.o)
   return false
  }
}
}
document.onselectstart=function(){return false}
window.onfocus=function(){document.onmouseup()}
window.onblur=function(){document.onmouseup()}
document.onmouseup=function(){
if(dragobj.o!=null){
  dragobj.o.style.width="auto"
  dragobj.o.style.height="auto"
  dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
  dragobj.o.style.position=""
  oDel(dragobj.otemp)
  dragobj={}
}
}
document.onmousemove=function(e){
e=e||event
if(dragobj.o!=null){
  dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
  dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
  createtmpl(e)
}
}
function getxy(e){
var a=new Array()
var t=e.offsetTop;
var l=e.offsetLeft;
var w=e.offsetWidth;
var h=e.offsetHeight;
while(e=e.offsetParent){
  t+=e.offsetTop;
  l+=e.offsetLeft;
}
a[0]=t;a[1]=l;a[2]=w;a[3]=h
  return a;
}
function inner(o,e){
var a=getxy(o)
if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
  if(e.y<(a[0]+a[3]/2))
   return 1;
  else
   return 2;
}else
  return 0;
}
function createtmpl(e){
for(var i=0;i<12;i++){
  if($("m"+i)==dragobj.o)
   continue
  var b=inner($("m"+i),e)
  if(b==0)
   continue
  dragobj.otemp.style.width=$("m"+i).offsetWidth
  if(b==1){
   $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
  }else{
   if($("m"+i).nextSibling==null){
    $("m"+i).parentNode.appendChild(dragobj.otemp)
   }else{
    $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
   }
  }
  return
}
for(var j=0;j<3;j++){
  if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
   continue
  var op=getxy($("dom"+j))
  if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
   $("dom"+j).appendChild(dragobj.otemp)
   dragobj.otemp.style.width=(op[2]-10)+"px"
  }
}
}
</script>
</head>
<body>
<div class=content>
  <div class=left id=dom0>
    <div class=mo id=m0>
      <h1>dom0</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m1>
      <h1>dom1</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m2>
      <h1>dom2</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m3>
      <h1>dom3</h1>
      <div class="nr"></div>
    </div>
  </div>
  <div class=center id=dom1>
    <div class=mo id=m4>
      <h1>dom4</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m5>
      <h1>dom5</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m6>
      <h1>dom6</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m7>
      <h1>dom7</h1>
      <div class="nr"></div>
    </div>
  </div>
  <div class=right id=dom2>
    <div class=mo id=m8>
      <h1>dom8</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m9>
      <h1>dom9</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m10>
      <h1>dom10</h1>
      <div class="nr"></div>
    </div>
    <div class=mo id=m11>
      <h1>dom11</h1>
      <div class="nr"></div>
    </div>
  </div>
</div>
</body>
</html>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
15# 大 中 小 发表于 2008-6-24 14:12  只看该作者
十九、静态页面的分页效果
复制内容到剪贴板
代码:
<style>
* {
  font-size:10.2pt;
  font-family:tahoma;
  line-height:150%;
}
.divContent
{
  border:1px solid red;
  background-color:#FFD2D3;
  width:500px;
  word-break:break-all;
  margin:10px 0px 10px;
  padding:10px;
}
</style>

header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<script language="jscript">
<!--
s="<p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p><p>女老师竭力向孩子们证明，学习好功课的重要性。 </p><p>她说：“牛顿坐在树下，眼睛盯着树在思考，这时，有一个苹果落在他的头上，于是他发现了万有引力定律，孩子们，你们想想看，做一位伟大的科学家多么好，多么神气啊，要想做到这一点，就必须好好学习。” </p><p>“班上一个调皮鬼对此并不满意。他说：“兴许是这样，可是，假如他坐在学校里，埋头书本，那他就什么也发现不了啦。” </p>";
function DHTMLpagenation(content) { with (this)
{
  // client static html file pagenation

  this.content=content;
  this.contentLength=content.length;
  this.pageSizeCount;
  this.perpageLength=100; //default perpage byte length.
  this.currentPage=1;
  //this.regularExp=/.+[\?\&]page=(\d+)/;
  this.regularExp=/\d+/;

  this.divDisplayContent;
  this.contentStyle=null;
  this.strDisplayContent="";
  this.divDisplayPagenation;
  this.strDisplayPagenation="";
  
  arguments.length==2?perpageLength=arguments[1]:'';

  try {
    divExecuteTime=document.createElement("DIV");
    document.body.appendChild(divExecuteTime);
  }
  catch(e)
  {
  }
  if(document.getElementById("divContent"))
  {
    divDisplayContent=document.getElementById("divContent");
  }
  else
  {
    try
    {
      divDisplayContent=document.createElement("DIV");
      divDisplayContent.id="divContent";
      document.body.appendChild(divDisplayContent);
    }
    catch(e)
    {
      return false;
    }
  }

  if(document.getElementById("divPagenation"))
  {
    divDisplayPagenation=document.getElementById("divPagenation");
  }
  else
  {
    try
    {
      divDisplayPagenation=document.createElement("DIV");
      divDisplayPagenation.id="divPagenation";
      document.body.appendChild(divDisplayPagenation);
    }
    catch(e)
    {
      return false;
    }
  }

  DHTMLpagenation.initialize();
  return this;
  
}};
DHTMLpagenation.initialize=function() { with (this)
{
  divDisplayContent.className=contentStyle!=null?contentStyle:"divContent";
  if(contentLength<=perpageLength)
  {
    strDisplayContent=content;
    divDisplayContent.innerHTML=strDisplayContent;
    return null;
  }

  pageSizeCount=Math.ceil((contentLength/perpageLength));

  DHTMLpagenation.goto(currentPage);
  DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayPage=function() { with (this)
{
  strDisplayPagenation="分页：";

  if(currentPage&&currentPage!=1)
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.previous()">上一页</a>&nbsp;&nbsp;';
  else
    strDisplayPagenation+="上一页&nbsp;&nbsp;";

  for(var i=1;i<=pageSizeCount;i++)
  {
    if(i!=currentPage)
      strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>&nbsp;&nbsp;';
    else
      strDisplayPagenation+=i+"&nbsp;&nbsp;";
  }

  if(currentPage&&currentPage!=pageSizeCount)
    strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>&nbsp;&nbsp;';
  else
    strDisplayPagenation+="下一页&nbsp;&nbsp;";

  strDisplayPagenation+="共 " + pageSizeCount + " 页，每页" + perpageLength + " 字符，调整字符数：<input type='text' value='"+perpageLength+"' id='ctlPerpageLength'><input type='button' value='确定' onclick='DHTMLpagenation.change(document.getElementById(\"ctlPerpageLength\").value);'>";

  divDisplayPagenation.innerHTML=strDisplayPagenation;
}};
DHTMLpagenation.previous=function() { with(this)
{
  DHTMLpagenation.goto(currentPage-1);
}};
DHTMLpagenation.next=function() { with(this)
{
  DHTMLpagenation.goto(currentPage+1);
}};
DHTMLpagenation.goto=function(iCurrentPage) { with (this)
{
  startime=new Date();
  if(regularExp.test(iCurrentPage))
  {
    currentPage=iCurrentPage;
    strDisplayContent=content.substr((currentPage-1)*perpageLength,perpageLength);
  }
  else
  {
    alert("page parameter error!");
  }
  DHTMLpagenation.displayPage();
  DHTMLpagenation.displayContent();
}};
DHTMLpagenation.displayContent=function() { with (this)
{
  divDisplayContent.innerHTML=strDisplayContent;
}};
DHTMLpagenation.change=function(iPerpageLength) { with(this)
{
  if(regularExp.test(iPerpageLength))
  {
    DHTMLpagenation.perpageLength=iPerpageLength;
    DHTMLpagenation.currentPage=1;
    DHTMLpagenation.initialize();
  }
  else
  {
    alert("请输入数字");
  }
}};

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->
</script>
我只是一个大侠!

TOP

hailuo

海螺大侠

IsMole Team

Rank: 8Rank: 8

大侠
16# 大 中 小 发表于 2008-6-24 14:14  只看该作者
二十、客齐集社区头像效果CSS解析
复制内容到剪贴板
代码:
<!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=utf-8" />
<title>zishu.cn test</title>
<style>
body{ font-size:12px; line-height:1.8; font-family:Verdana, "宋体", Arial,Sans; text-align:center; background:#FFF; color:#666; margin:50px; padding:0; list-style:none; }
a:link,a:visited{color:#000099; text-decoration: underline;}
a:hover,a:active{color:#000;text-decoration: none;}
#zishu_test li{ float:left; width:14%;text-align:center; margin:0 auto; list-style:none }
#zishu_test li a{border-right:1px solid #fff;border-bottom:1px solid #fff; width:100px; height:110px; background:#fff;display:block; padding-top:10px; margin:auto}
#zishu_test li img{ width:75px; height:75px; display:block; text-align:center; margin:auto; background:#FFF; padding:3px; border:1px solid #D8A18B;}
#zishu_test li span{display:none;}
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px solid #666; border-right:1px solid #666; background:#FA9000; width:100px; color:#FFF; position:absolute; }
* html #zishu_test li a:hover span {margin-left:-8px; } /* IE6 */
*+html #zishu_test li a:hover span {margin-left:-8px; }/* IE7*/
#zishu_test li a:hover{ border-right:1px solid #D8A18B;border-bottom:1px solid #D8A18B; width:100px; height:110px; background:#F5F5F5;display:block; padding-top:10px;}
</style>
</head>
<body>
<div id="zishu_test">
  <ul>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>64d / 47 hits</span><img src="http://yy.kijiji.cn/img/p/10000009.jpg">pixu</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>24d / 35 hits</span><img src="http://yy.kijiji.cn/img/p/294343.jpg">秀才</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>66d / 87 hits</span><img src="http://yy.kijiji.cn/img/p/10000010.jpg">透露</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>40d / 34 hits</span><img src="http://yy.kijiji.cn/img/p/11709126.jpg">LIVID</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>47d / 56 hits</span><img src="http://yy.kijiji.cn/img/p/10000002.jpg">老孟</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>42d / 36hits</span><img src="http://yy.kijiji.cn/img/p/11695932.jpg">小玉</a></li>
    <li><a href="http://yy.kijiji.cn/u/秀才"><span>63d / 67 hits</span><img src="http://yy.kijiji.cn/img/p/10000025.jpg">pixu</a></li>
  </ul>
</div>
</body>
</html>
posted @ 2008-06-25 18:15  javak  阅读(847)  评论(3)  编辑  收藏  举报