「javascript特效」javascript各种效果

javascript特效

1.实现tab切换效果

这个功能是很久之前实现的，现在发上来，很长一段时间没更新博客了，真惭愧。这个JS代码还有很多修改的空间，先发上来，以后再发个更新的版本吧。

这是效果图：

【HTML代码】

<pid="menu">

<ulid="nav">

<li><ahref="#" class="selected">tab1</a></li>

<li><ahref="#" class="">tab2</a></li>

<li><ahref="#" class="">tab3</a></li>

<pstyle="clear:both"></p>

</ul>

<pid="menu_con">

<pclass="tag" style="display:block">

这是TAB切换效果区域1

</p>

<pclass="tag" style="display:none">

这是TAB切换效果区域2

</p>

<pclass="tag" style="display:none">

这是TAB切换效果区域3

</p>

【js】

/**

* tabs

* @author 橡树小屋

*/

vartabs=function(){

functiontag(name,elem){

return(elem||document).getElementsByTagName(name);

}

//获得相应ID的元素

functionid(name){

returndocument.getelementbyid(name);

}

functionfirst(elem){

elem=elem.firstChild;

returnelem&&elem.nodeType==1? elem:next(elem);

}

functionnext(elem){

do{

elem=elem.nextsibling;

}while(

elem&&elem.nodeType!=1

)

returnelem;

}

return{

set:function(elemId,tabId){

varelem=tag("li",id(elemId));

vartabs=tag("p",id(tabId));

varlistNum=elem.length;

vartabNum=tabs.length;

for(vari=0;i<listNum;i++){

elem[i].onclick=(function(i){

returnfunction(){

for(varj=0;j<tabNum;j++){

if(i==j){

tabs[j].style.display="block";

//alert(elem[j].firstChild);

elem[j].firstChild.className="selected";

}

else{

tabs[j].style.display="none";

elem[j].firstChild.className="";

}

})(i)

}

}();

window.onload=function(){

tabs.set("nav","menu_con");

}

【CSS】

body{ background:#FFF;}

a{color:#585858}

#menu{width:360px;}

/*-------------------nav样式----------------------*/

#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;

background:url(../images/bg.gif)}

#menu #nav li {float:left;width:120px;}

#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}

/*-------------------列表标题样式----------------------*/

#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}

.selected{background:url(../images/tag_bg.gif);}

.clear{ clear:both}

调用方法：

tabs.set("nav","menu_con");

代码下载点击这里

只实现了点击切换的效果

2.常用的JS方法

[javascript]view plaincopy

/全选取消按钮函数
functioncheckAll(chkobj){
if($(chkobj).text()=="全选"){
$(chkobj).children("span").text("取消");
$(".checkallinput:enabled").prop("checked",true);
}else{
$(chkobj).children("span").text("全选");
$(".checkallinput:enabled").prop("checked",false);
}
}
//===========================工具类函数============================
//只允许输入数字
functioncheckNumber(e){
varkeynum=window.event?e.keyCode:e.which;
if((48<=keynum&&keynum<=57)||keynum==8){
returntrue;
}else{
returnfalse;
}
}
//只允许输入小数
functioncheckForFloat(obj,e){
varisOK=false;
varkey=window.event?e.keyCode:e.which;
if((key>95&&key<106)||//小键盘上的0到9
(key>47&&key<60)||//大键盘上的0到9
(key==110&&obj.value.indexof(".")<0)||//小键盘上的.而且以前没有输入.
(key==190&&obj.value.indexOf(".")<0)||//大键盘上的.而且以前没有输入.
key==8||key==9||key==46||key==37||key==39){
isOK=true;
}else{
if(window.event){//IE
e.returnValue=false;//event.returnValue=false效果相同.
}else{//Firefox
e.preventDefault();
}
}
returnisOK;
}
//检查短信字数
functionchecktxt(obj,txtId){
vartxtCount=$(obj).val().length;
if(txtCount<1){
returnfalse;
}
varsmsLength=Math.ceil(txtCount/62);
$("#"+txtId).html("您已输入<b>"+txtCount+"</b>个字符，将以<b>"+smsLength+"</b>条短信扣取费用。");
}
//四舍五入函数
functionForDight(Dight,How){
Dight=Math.round(Dight*Math.pow(10,How))/Math.pow(10,How);
returnDight;
}
//写Cookie
functionaddCookie(objName,objValue,objHours){
varstr=objName+"="+escape(objValue);
if(objHours>0){//为0时不设定过期时间，浏览器关闭时cookie自动消失
vardate=newDate();
varms=objHours*3600*1000;
date.setTime(date.getTime()+ms);
str+=";expires="+date.toGMTString();
}
document.cookie=str;
}
//读Cookie
functiongetCookie(objName){//获取指定名称的cookie的值
vararrStr=document.cookie.split(";");
for(vari=0;i<arrStr.length;i++){
vartemp=arrStr[i].split("=");
if(temp[0]==objName)returnunescape(temp[1]);
}
return"";
}
//========================基于artdialog插件========================
//可以自动关闭的提示，基于artdialog插件
functionjs print(msgtitle,url,callback){
vard=dialog({content:msgtitle}).show();
settimeout(function(){
d.close().remove();
},2000);
if(url=="back"){
frames["mainframe"].hi story.back(-1);
}elseif(url!=""){
frames["mainframe"].location.href=url;
}
//执行回调函数
if(arguments.length==3){
callback();
}
}
//弹出一个Dialog窗口
functionjsdialog(msgtitle,msgcontent,url,callback){
vard=dialog({
title:msgtitle,
content:msgcontent,
okValue:'确定',
ok:function(){},
onclose:function(){
if(url=="back"){
history.back(-1);
}elseif(url!=""){
location.href=url;
}
//执行回调函数
if(argnum==5){
callback();
}
}
}).showModal();
}
//打开一个最大化的Dialog
functionShowMaxDialog(tit,url){
dialog({
title:tit,
url:url
}).showModal();
}
//执行回传函数
functionExePostBack(objId,objmsg){
if($(".checkallinput:checked").size()<1){
parent.dialog({
title:'提示',
content:'对不起，请选中您要操作的记录！',
okValue:'确定',
ok:function(){}
}).showModal();
returnfalse;
}
varmsg="删除记录后不可恢复，您确定吗？";
if(arguments.length==2){
msg=objmsg;
}
parent.dialog({
title:'提示',
content:msg,
okValue:'确定',
ok:function(){
__doPostBack(objId,'');
},
cancelValue:'取消',
cancel:function(){}
}).showModal();
returnfalse;
}
//检查是否有选中再决定回传
functionCheckPostBack(objId,objmsg){
varmsg="对不起，请选中您要操作的记录！";
if(arguments.length==2){
msg=objmsg;
}
if($(".checkallinput:checked").size()<1){
parent.dialog({
title:'提示',
content:msg,
okValue:'确定',
ok:function(){}
}).showModal();
returnfalse;
}
__doPostBack(objId,'');
returnfalse;
}
//执行回传无复选框确认函数
functionExeNoCheckPostBack(objId,objmsg){
varmsg="删除记录后不可恢复，您确定吗？";
if(arguments.length==2){
msg=objmsg;
}
parent.dialog({
title:'提示',
content:msg,
okValue:'确定',
ok:function(){
__doPostBack(objId,'');
},
cancelValue:'取消',
cancel:function(){}
}).showModal();
returnfalse;
}

3.封装自己的JS组件，你也可以

前言：之前分享了那么多bootstrap组件的使用经验，这篇博主打算研究下JS组件的扩展和封装，我们来感受下JQuery为我们提供$.Extend的神奇，看看我们怎么自定义自己的组件，比如我们想扩展一个$("#id").MyJsControl({})做我们自己的组件，我们该如何去做呢，别急，我们慢慢来看看过程。

一、扩展已经存在的组件

1、需求背景

很多时候，我们使用jquery.ajax的方式向后台发送请求，型如

复制代码

　　　　　　$.ajax({
                type: "post",
                url: "/User/Edit",
                data: { data: JSON.stringify(postdata) },
                success: function (data, status) {
                    if (status == "success") {
                        toastr.success('提交数据成功');
                        $("#tb_aaa").bootstrapTable('refresh');
                    }
                },
                ERROR: function (e) {
                },
                complete: function () {
                }

            });

复制代码

这种代码太常见了，这个时候我们有这样一个需求：在自己调用ajax请求的时候，我们不想每次都写error:function(e){}这种代码，但是我们又想让它每次都将ajax的错误信息输出到浏览器让用户能够看到。怎么办呢？

2、实现原理

要想实现以上效果其实并不难，我们可以将$.ajax({})封装一层，在封装的公共方法里面定义error对应的事件即可。确实，这样能达到我们的要求，但是并不完美，原因很简单：1）在jquery的基础上面再封装一层，效率不够高；2）需要改变调用者的习惯，每次调用ajax的时候需要按照我们定义的方法的规则来写，而不能直接用原生的$.ajax({})这种写法，这是我们不太想看到。

既然如此，那我们如何做到既不封装控件，又能达到以上要求呢？答案就是通过我们的$.extend去扩展原生的jquery.ajax。

其实实现起来也并不难，通过以下一段代码就能达到我们的要求。

复制代码

(function ($) {
    //1.得到$.ajax的对象
    var _ajax = $.ajax;
    $.ajax = function (options) {
        //2.每次调用发送ajax请求的时候定义默认的error处理方法
        var fn = {
            error: function (XMLHttprequest, textStatus, errorthrown) {
                toastr.error(XMLHttpRequest.responsetext, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }
        //3.如果在调用的时候写了error的处理方法，就不用默认的
        if (options.error) {
            fn.error = options.error;
        }
        if (options.success) {
            fn.success = options.success;
        }
        if (options.beforeSend) {
            fn.beforeSend = options.beforeSend;
        }
        if (options.complete) {
            fn.complete = options.complete;
        }
        //4.扩展原生的$.ajax方法，返回最新的参数
        var _options = $.extend(options, {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                fn.error(XMLHttpRequest, textStatus, errorThrown);
            },
            success: function (data, textStatus) {
                fn.success(data, textStatus);
            },
            beforeSend: function (XHR) {
                fn.beforeSend(XHR);
            },
            complete: function (XHR, TS) {
                fn.complete(XHR, TS);
            }
        });
        //5.将最新的参数传回ajax对象
        _ajax(_options);
    };
})(jQuery);

复制代码

如果没接触过jquery里面$.extend这个方法的童鞋可能看不懂以上是什么意思。好，我们首先来看看jquery API对$.extend()方法是作何解释的。

什么意思呢？我们来看官方的两个例子就知道了

栗子一：

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);

结果：

settings == { validate: true, limit: 5, name: "bar" }

栗子二：

var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

结果：

settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

以上的两个简单例子就说明extend()方法作用就是合并另个对象，有相同的则覆盖，没有相同的则添加。就是这么简单。

了解了$.extend()的作用，我们就能大概看懂上面那个扩展jquery.ajax的实现了吧。主要的步骤分为：

1）定义默认的error处理方法。

复制代码

var fn = {
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                toastr.error(XMLHttpRequest.responseText, '错误消息', { closeButton: true, timeOut: 0, positionClass: 'toast-top-full-width' });
            },
            success: function (data, textStatus) { },
            beforeSend: function (XHR) { },
            complete: function (XHR, TS) { }
        }

复制代码

2）判断用户在调用$.ajax({})的时候是否自定了error:function(){}，如果定义过，则使用用户定义的，反之则用默认的error处理方法。

3）使用$.extend()将error默认处理方法传入$.ajax()的参数中。我们看options参数时包含$.ajax()方法里面所有的参数的，然后用默认的fn去扩展它即可。

通过以上三步就能够实现对$.ajax()方法里面error默认处理方法。这样扩展，对于我们使用者来说完全感觉不到变化，我们仍然可以$.ajax({});这样去发送ajax请求，如果没有特殊情况，不用写error处理方法。

3、组件扩展的意义

使用组件扩展，能够帮助我们在原有组件上面增加一些和我们系统业务相关的处理需求，而在使用时，还是和使用原生组件一样去调用，免去了在组件上面再封装一层的臃肿。

二、扩展自己组件

上面通过$.extend()方法扩展了$.ajax()的error事件处理方法。下面我们来封装一个自己的组件试试，功能很简单，但比较有说明性。我们就以select这个组件为例，很多情况下，我们的select里面的option都是需要从数据库里面取数据的，所以一般的做法就是发送一个ajax请求，然后在success方法里面拼html。现在我们就封装一个select远程取数据的方法。

1、代码实现以及使用示例

先上干货吧，将写好的整出来：

复制代码

(function ($) {
     //1.定义jquery的扩展方法combobox
    $.fn.combobox = function (options, param) {
        if (typeof options == 'string') {
            return $.fn.combobox.methods[options](this, param);
        }
        //2.将调用时候传过来的参数和default参数合并
        options = $.extend({}, $.fn.combobox.defaults, options || {});
        //3.添加默认值
        var target = $(this);
        target.attr('valuefield', options.valueField);
        target.attr('textfield', options.textField);
        target.empty();
        var option = $('<option></option>');
        option.attr('value', '');
        option.text(options.placeholder);
        target.APPend(option);
        //4.判断用户传过来的参数列表里面是否包含数据data数据集，如果包含，不用发ajax从后台取，否则否送ajax从后台取数据
        if (options.data) {
            init(target, options.data);
        }
        else {
            //var param = {};
            options.onBeforeload.call(target, options.param);
            if (!options.url) return;
            $.getJSON(options.url, options.param, function (data) {
                init(target, data);
            });
        }
        function init(target, data) {
            $.each(data, function (i, item) {
                var option = $('<option></option>');
                option.attr('value', item[options.valueField]);
                option.text(item[options.textField]);
                target.append(option);
            });
            options.onLoadSuccess.call(target);
        }
        target.unbind("change");
        target.on("change", function (e) {
            if (options.onChange)
                return options.onChange(target.val());
        });
    }

    //5.如果传过来的是字符串，代表调用方法。
    $.fn.combobox.methods = {
        getValue: function (jq) {
            return jq.val();
        },
        setValue: function (jq, param) {
            jq.val(param);
        },
        load: function (jq, url) {
            $.getJSON(url, function (data) {
                jq.empty();
                var option = $('<option></option>');
                option.attr('value', '');
                option.text('请选择');
                jq.append(option);
                $.each(data, function (i, item) {
                    var option = $('<option></option>');
                    option.attr('value', item[jq.attr('valuefield')]);
                    option.text(item[jq.attr('textfield')]);
                    jq.append(option);
                });
            });
        }
    };

    //6.默认参数列表
    $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '请选择',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };
})(jQuery);

复制代码

先来看看我们自定义组件如何使用：

用法一：通过URL远程取数据并初始化

首先定义一个空的select

<select id="sel_search_plant" class="form-control"></select>

然后初始化它

复制代码

$(function(){
     $('#sel_search_plant').combobox({
            url: '/apiaction/Plant/Find',
            valueField: 'TM_PLANT_ID',
            textField: 'NAME_C'
      });
})

复制代码

参数很简单，就不一一介绍了。很简单有木有~~

用法二：取值和设置

var strSelectedValue = $('#sel_search_plant').combobox("getValue");

$('#sel_search_plant').combobox("setValue", "aaa");

其实对于简单的select标签，博主觉得这里的getValu和SetValue意义不大，因为直接通过$('#sel_search_plant').val()就能解决的事，何必要再封一层。这里仅仅是做演示，试想，如果是封装成类似select2或者multiselect这种组件，getValue和setValue的意义就有了，你觉得呢？

2、代码详细讲解

上面的实现代码，如果您一眼就能看懂，证明您是经常封组件的大虾了，下面的就不用看了。如果看不懂，也没关系，我们将代码拆开详细看看里面是什么鬼。

（1）首先看看我们最常看到的如下写法：

(function ($) {
      //....封装组件逻辑
})(jQuery);

初初看到这种用法，博主也是狂抓，这是什么鬼嘛，四不像啊。使用多了之后才知道原来这就是一个匿名函数的形式。将它拆开来看如下：

var fn = function($){
       //.....组件封装逻辑
};
fn(jQuery);

也就是说这种写法就表示先定义一个方法，然后立即调用这个方法，jQuery相当于实参。打开jquery.js的原文件可以看到，jQuery是这个文件里面的一个全局变量。

（2）定义自己的组件的代码：

$.fn.combobox = function (options, param) {
    
};

习惯这种写法的应该知道，这个就表示向jquery对象添加自定义方法，比如你想使用文章开始的$("#id").MyJsControl({})这种用法，你就可以这样定义$.fn.MyJsControl=function(options){}。

（3）options = $.extend({}, $.fn.combobox.defaults, options || {});这一句，看过上文的朋友应该还记得extend这么一个方法吧，怎么样，又来了你。这句话其实就没什么好说的了，合并默认参数和用户传进来的参数。

（4）默认参数列表

复制代码

 $.fn.combobox.defaults = {
        url: null,
        param: null,
        data: null,
        valueField: 'value',
        textField: 'text',
        placeholder: '请选择',
        onBeforeLoad: function (param) { },
        onLoadSuccess: function () { },
        onChange: function (value) { }
    };

复制代码

如果用户没有传参，就用默认的参数列表。如果你够细心，你会发现博主之前分享的其他bootstrap组件的js文件里面都有这么一个default参数列表。我们随便找两个：

bootstrap上传组件

bootstrap table组件

基本都是这么些用法。这样来看，是否也可以自己封一个js组件~~

三、总结

以上就是博主对js组件扩展以及封装用法的认识和总结。当然，都是些比较简单基础的封装，如果想要实现类似bootstrap table的组件，那还差得很远。不过万丈高楼平地起，只要打好基础，封一个自己的table组件也不是什么大问题。文中如果有理解不对的地方，欢迎指出，博主将不胜感激。如果本文能够对你有丝毫帮助，麻烦抬起你的小手点个推荐，博主一定继续努力，将更好的文章分享给大家。

4.document和window对象详解

document对象]

该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。

属性

alinkColor 活动链接的颜色(ALINK)

anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)

anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)

bgColor 文档的背景颜色(BGCOLOR)

cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性

fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)

form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)

forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)

lastModified 文档最后的修改日期

linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)

link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)

links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)

location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象

referrer 包含链接的文档的URL,用户单击该链接可到达当前文档

title 文档的标题((TITLE>)

vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性

方法

clear 清除指定文档的内容

close 关闭文档流

open 打开文档流

write 把文本写入文档

writeln 把文本写入文档,并以换行符结尾

[window对象]

它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。

属性

defaultStatus 缺省的状态条消息

document 当前显示的文档(该属性本身也是一个对象)

frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)

frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)

history 窗口的历史列表(该属性本身也是一个对象)

length 窗口内的框架数

location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)

name 窗口打开时,赋予该窗口的名字

opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)

parent 包含当前框架的窗口的同义词。frame和window对象的一个属性

self 当前窗口或框架的同义词

status 状态条中的消息

top 包含当前框架的最顶层浏览器窗口的同义词

window 当前窗口或框架的同义词,与self相同

方法

alert() 打开一个Alert消息框

clearTimeout() 用来终止setTimeout方法的工作

close() 关闭窗口

confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false

blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)

focus() 把指定的窗口带到前台(另一个新方法)

open() 打开一个新窗口

prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本

setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序

事件处理程序

Onload() 页面载入时触发

Onunload() 页面关闭时触发

5.几种常见的JavaScript特效

①页面显示大广告图片及其自动关闭

在打开一个页面时，常常会出现一个大广告图片显示网站的最新活动等，一般广告显示5秒左右，广告又会自己关闭，这个是怎么实现的？

其实只需要将图片加在网页合适的位置，然后再写一个删去隐藏图片元素的函数，并设置n秒后执行：

        function showAd(){
        //默认图片所在p的id为ad
            var Pic = document.getElementById('ad');
            setTimeout(function() {
                Pic.style.display = 'none';
            },5000);
        }
        window.onload=showAd;1
2
3
4
5
6
7
8

②输入完成后进行校验

实际上只需要在input标签里面添加一个onblur属性，该属性绑定一个用于校验的函数即可：

<input type="text" id="name" onblur="validateTel()"/>
    <script>
      function validateTel(){
            alert("do something");

      }
    </script>1
2
3
4
5
6
7

③勾选全部复选框

在网站中，如果复选框较多，会有一个全选按钮，点击后，所有复选框会被选中：

<html>
<head>
   <meta charset="utf-8" />
</head>
<body>
    你的爱好是：</br>
     <input type="checkbox" name="hobby" value="" />篮球
     <input type="checkbox" name="hobby" value=""/>足球
     <input type="checkbox" name="hobby" value=""/>网球
     <input type="checkbox" name="hobby" value=""/>乒乓
     <input type="checkbox" name="hobby" value=""/>游泳
     <input type="checkbox" name="hobby" id="selectall" value=" " onclick="SelectAll()"/>全选

    <script>
      function SelectAll(){
          if(document.getElementById('selectall').checked == true){
              var allValue = document.getElementsByName('hobby');
              for(var i=0;i<allValue.length;i++){
                  allValue[i].checked=true;
              }
          }

      }
    </script>
</body>

</html>

6.常见40个常用的js页面效果图

1. on contextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

2. <body onselectstart="return false"> 取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false;" oncut="return false;" 防止复制

5. <link rel="shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

7. <input style="ime-mode:disabled"> 关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

10. 网页将不能被另存为

11. <input type=button value=查看网页源代码

onclick="window.location = "view-source:"+ "http://www.williamlong.info"">

12.删除时确认

13. 取得控件的绝对位置

//Javascript

function getIE(e){

var t=e.offsettop;

var l=e.offsetleft;

while(e=e.offsetparent)

alert("top="+t+"/nleft="+l);

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光标是停在文本框文字的最后

function cc()

{

var e = event.srcelement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

15. 判断上一页的来源

javascript：

document.referrer

16. 最小化、最大化、关闭窗口

本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT　CTRL

}

document.onkeydown=look;

</script>

18. 网页不会被缓存

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎样让表单没有凹凸感？

或

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

1 solid #000000"></textarea>

20.<p><span>&<layer>的区别？

<p>(pision)用来定义大段的页面元素，会产生转行

<span>用来定义同一行内的元素，跟<p>的唯一区别是不产生转行

<layer>是ns的标记，ie不支持，相当于<p>

21.让弹出窗口总是在最上面:

22.不要滚动条?

让竖条没有:

</body>

让横条没有:

</body>

两个都去掉？更简单了

</body>

23.怎样去掉图片链接点击后，图片周围的虚线？

24.电子邮件处理提交表单

</form>

25.在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

26.如何设定打开页面的大小

打开页面的位置<body onload="top.moveBy(300,200);">

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(/blog/logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

28. 检查一段字符串是否全由数字组成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

29. 获得一个窗口的大小

document.body.clientwidth; document.body.clientheight

30. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

31.TEXTAREA自适应文字行数的多少

</textarea>

32. 日期减去天数等于第二个日期

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getmonth() + 1) + "月" + a.getDate() + "日")

}

cc("12/23/2002",2)

</script>

33. 选择了哪一个Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

34.脚本永不出错

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

35.ENTER键可以让光标移到下一个输入框

36. 检测某个网站的链接速度：

把如下代码加入<body>区域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value="/blog/测试中......>" =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url)

else

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto("http://"+autourl+"")>")}

run()</script>

37. 各种样式的光标

auto ：标准光标

default ：标准箭头

hand ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：?帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

38.页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

39.在规定时间内跳转

40.网页是否被检索

其中属性值有以下一些:

属性值为"all": 文件将被检索，且页上链接可被查询；

属性值为"none": 文件不被检索，而且不查询页上的链接；

属性值为"index": 文件将被检索；

属性值为"follow": 查询页上的链接；

属性值为"noindex": 文件不检索，但可被查询链接；

属性值为"nofollow": 文件不被检索，但可查询页上的链接。

最大化窗口？

<!--

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

//-->

</script>

解决问题：由于层与下拉框之间的优先级是：下拉框 > 层，因此在显示的时候，会因为优先级的次序而会出现如上问题。（如果几个元素都是层的话，我们可以通过层的 z-index 属性来设置）解决办法就是：给层中放一个优先级比下拉框更高的元素（iframe），从而解决此问题！具体解决代码如下：

<table>

</table>

</p>

<form>

<select><option>A form selection list</option></select>

</form>

输入框也可以做的很漂亮了

外向数：<input

name=answer

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

　没回答的题数：<input

name=unanswer id="unanswer"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

<br>

总得分:

<input

name=score id="score"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

　结　　　　论:

<input

name=xgjg id="xgjg"

style="color: rgb(255,0,0); border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid rgb(192,192,192)">

<br>

</p>

注意：修改<body>为<body onload="max.Click()">即为打开最大

化窗口，而如果改为<body onload="min.Click()">就变为窗口一打开就最小化

</object> <object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

</object>

</body>

页面自动刷新（说明）

当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1，页面自动刷新：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳转到http://www.williamlong.info页面。

页面自动关闭

5000是指时间<body onLoad="setTimeout(window.close, 5000)">

弹出窗口自动关闭

10秒后弹出窗口自动关闭

注意：在新的tan.htm的body中要加 <onLoad="closeit()">

head

<!--

var gt = unescape('%3e');

var popup = null;

var over = "Launch Pop-up Navigator";

popup = window.open('', 'popupnav', 'width=225,height=235,resizable=1,scrollbars=auto');

if (popup != null) {

if (popup.opener == null) {

popup.opener = self;

}

popup.location.href = 'tan.htm';

}

// -->

</script>

<body>注意：这段代码是在新建文件中的

function closeit()

</script>

这个可不是<iframe>(引用）呀。是直接调用的。以下代码加入<body>区域

</object>

7.JavaScript经典效果集锦

申请加精，只有这样本帖子才不会沉下去，感觉这个帖子对大家很有用的!

一实用且必用的小脚本代码:

脚本1：进入主页以后自动播放声音

CODE:

[Copy to clipboard]

脚本2：进入主页后自动最大话,省的去在自己单击了

CODE:

[Copy to clipboard]

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

</script>

脚本3：显示现在时间的脚本

CODE:

[Copy to clipboard]

脚本4：显示最后修改时间的脚本

CODE:

[Copy to clipboard]

脚本5：设为首页,加为收藏，加入频道,启动outlook发信

CODE:

[Copy to clipboard]

<a style="cursor:hand"　

onclick="this.style.behavior="url(#default#homepage)";

this.setHomePage(http://10.13.31.90/~kayvin/);">">设为首页</a>

<a style="cursor:hand"

onclick="window.external.AddFavorite(location.href,document.title);">加入收藏</a>

脚本6：状态栏动态显示现在时间

CODE:

[Copy to clipboard]

function see(){

window.setTimeout("see()",1000);

today = new Date();

self.status = today.toString();

}

</script>

脚本7：关闭窗口的脚本

CODE:

[Copy to clipboard]

脚本8：按下F12键,直接返回首页

CODE:

[Copy to clipboard]

if(event.keyCode==123){document.location.href=http://10.13.31.90/~kayvin/}

}

if(document.onkeydown==null)

{document.onkeydown=look}

</script>

脚本9：后退,刷新,前进

CODE:

[Copy to clipboard]

脚本10：设定时间弹出窗口,4000=4秒,当然你可以自定义

CODE:

[Copy to clipboard]

{

window.open(" 10.13.31.90/~kayvin/ ","name","width=500,height=150,border=0")

}

setTimeout("l()",4000)

</script>

二鼠标旁边的提示信息,类似与163登录后的页面提示效果：

CODE:

[Copy to clipboard]

//***********默认设置定义.*********************

tPopWait=50;//停留tWait豪秒后显示提示。

tPopShow=5000;//显示tShow豪秒后关闭提示

showPopStep=20;

popOpacity=99;

//***************内部变量定义*****************

sPop=null;

curShow=null;

tFadeOut=null;

tFadeIn=null;

tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");

document.write(".cPopText { background-color: #F8F8F5;color:#000000; border: 1px #000000 solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");

document.write("</style>");

document.write("<p id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></p>");

function showPopupText(){

var o=event.srcElement;

MouseX=event.x;

MouseY=event.y;

if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};

if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};

if(o.dypop!=sPop) {

sPop=o.dypop;

clearTimeout(curShow);

clearTimeout(tFadeOut);

clearTimeout(tFadeIn);

clearTimeout(tFadeWaiting);

if(sPop==null || sPop=="") {

dypopLayer.innerHTML="";

dypopLayer.style.filter="Alpha()";

dypopLayer.filters.Alpha.opacity=0;

}

else {

if(o.dyclass!=null) popStyle=o.dyclass

else popStyle="cPopText";

curShow=setTimeout("showIt()",tPopWait);

}

function showIt(){

dypopLayer.className=popStyle;

dypopLayer.innerHTML=sPop;

popWidth=dypopLayer.clientWidth;

popHeight=dypopLayer.clientHeight;

if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24

else popLeftAdjust=0;

if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24

else popTopAdjust=0;

dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;

dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;

dypopLayer.style.filter="Alpha(Opacity=0)";

fadeOut();

}

function fadeOut(){

if(dypopLayer.filters.Alpha.opacity<popOpacity) {

dypopLayer.filters.Alpha.opacity+=showPopStep;

tFadeOut=setTimeout("fadeOut()",1);

}

else {

dypopLayer.filters.Alpha.opacity=popOpacity;

tFadeWaiting=setTimeout("fadeIn()",tPopShow);

}

function fadeIn(){

if(dypopLayer.filters.Alpha.opacity>0) {

dypopLayer.filters.Alpha.opacity-=1;

tFadeIn=setTimeout("fadeIn()",1);

}

document.onmouseover=showPopupText;

</script>

三如果文字过长,则将过长的部分变成省略号显示：

CODE:

[Copy to clipboard]

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;

overflow: hidden; text-overflow:ellipsis">

<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

</DIV>

四滚动的图片

CODE:

[Copy to clipboard]

imgArr=new Array()

imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onmouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://mc.mapabc.com/mapcard/images/LP_card_1.gif border=0></a>"

var moveStep=4 //步长，单位：pixel

var moveRelax=100 //移动时间间隔，单位：ms

ns4=(document.layers)?true:false

var displayimgAmount=4 //视区窗口可显示个数

var pWidth=220 //每块图片占位宽

var pHeight=145 //每块图片占位高

var startDnum=0

var nextDnum=startDnum+displayImgAmount

var timeID

var outHover=false

var startDivClipLeft

var nextDivClipRight

function initDivPlace(){

if (ns4){

for (i=0;i<displayImgAmount;i++){

eval("document.pOuter.document.pAds"+i+".left="+pWidth*i)

}

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.pOuter.document.pAds"+i+".left="+pWidth*displayImgAmount)

}

}else{

for (i=0;i<displayImgAmount;i++){

eval("document.all.pAds"+i+".style.left="+pWidth*i)

}

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.all.pAds"+i+".style.left="+pWidth*displayImgAmount)

}

function mvStart(){

timeID=setTimeout(moveLeftDiv,moveRelax)

}

function mvStop(){

clearTimeout(timeID)

}

function moveLeftDiv(){

if (ns4){

for (i=0;i<=displayImgAmount;i++){

eval("document.pOuter.document.pAds"+parseInt((startDnum+i)%imgArr.length)+".left=document.pOuter.document.pAds"+parseInt((startDnum+i)%imgArr.length)+".left-moveStep")

}

startDivClipLeft=parseInt(eval("document.pOuter.document.pAds"+startDnum+".clip.left"))

nextDivClipRight=parseInt(eval("document.pOuter.document.pAds"+nextDnum+".clip.right"))

if (startDivClipLeft+moveStep>pWidth){

eval("document.pOuter.document.pAds"+nextDnum+".clip.right="+pWidth)

eval("document.pOuter.document.pAds"+startDnum+".left="+pWidth*displayImgAmount)

eval("document.pOuter.document.pAds"+parseInt((nextDnum+1)%imgArr.length)+".left=document.pOuter.document.pAds"+nextDnum+".left+"+pWidth)

eval("document.pOuter.document.pAds"+parseInt((nextDnum+1)%imgArr.length)+".clip.left=0")

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(pWidth-startDivClipLeft)

nextDivClipRight=moveStep-(pWidth-nextDivClipRight)

}else{

eval("document.pOuter.document.pAds"+nextDnum+".clip.left=0")

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.pOuter.document.pAds"+startDnum+".clip.left="+startDivClipLeft)

eval("document.pOuter.document.pAds"+nextDnum+".clip.right="+nextDivClipRight)

}else{

for (i=0;i<=displayImgAmount;i++){

eval("document.all.pAds"+parseInt((startDnum+i)%imgArr.length)+".style.left=document.all.pAds"+parseInt((startDnum+i)%imgArr.length)+".style.pixelLeft-moveStep")

}

startDivClipLeft=parseInt(eval("document.all.pAds"+startDnum+".currentstyle.clipLeft"))

nextDivClipRight=parseInt(eval("document.all.pAds"+nextDnum+".currentStyle.clipRight"))

if (startDivClipLeft+moveStep>pWidth){

eval("document.all.pAds"+nextDnum+".style.clip='rect(0,"+pWidth+","+pHeight+",0"+")'")

eval("document.all.pAds"+startDnum+".style.left="+pWidth*displayImgAmount)

eval("document.all.pAds"+parseInt((nextDnum+1)%imgArr.length)+".style.left=document.all.pAds"+nextDnum+".style.pixelLeft+"+pWidth)

startDnum=(++startDnum)%imgArr.length

nextDnum=(startDnum+displayImgAmount)%imgArr.length

startDivClipLeft=moveStep-(pWidth-startDivClipLeft)

nextDivClipRight=moveStep-(pWidth-nextDivClipRight)

}else{

startDivClipLeft+=moveStep

nextDivClipRight+=moveStep

}

eval("document.all.pAds"+startDnum+".style.clip='rect(0,"+pWidth+","+pHeight+","+startDivClipLeft+")'")

eval("document.all.pAds"+nextDnum+".style.clip='rect(0,"+nextDivClipRight+","+pHeight+",0)'")

}

if (outHover){

mvStop()

}else{

mvStart()

}

function writeDivs(){

if (ns4){

document.write("<ilayer name=pOuter width=750 height="+pHeight+">")

for (i=0;i<imgArr.length;i++){

document.write("<layer name=pAds"+i+">")

document.write(imgArr[i]+" ")

document.write("</layer>")

}

document.write("</ilayer>")

document.close()

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.pOuter.document.pAds"+i+".clip.right=0")

}

}else{

document.write("<p id=pOuter style='position:relative' width=750 height="+pHeight+">")

for (i=0;i<imgArr.length;i++){

document.write("<p id=pAds"+i+" style='position:absolute;clip:rect(0,"+pWidth+","+pHeight+",0)'>")

document.write(imgArr[i]+" ")

document.write("</p>")

}

document.write("</p>")

for (i=displayImgAmount;i<imgArr.length;i++){

eval("document.all.pAds"+i+".style.clip='rect(0,0,"+pHeight+",0)'")

}

</script>

<SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>

五接收键盘指令的脚本:

CODE:

[Copy to clipboard]

<!--

var hotkey=97

var destination="http://www.wyev.com"

if (document.layers)

document.captureEvents(Event.KEYPRESS)

function backhome(e){

if (document.layers){

if (e.which==hotkey)

window.location=destination

}

else if (document.all){

if (event.keyCode==hotkey)

window.location=destination

}

document.onkeypress=backhome

//-->

</SCRIPT>

onkeydown="javascript:onenter();"

function onenter(){

if(event.keyCode==13){

alert("回车");

}

六让你的文本链接渐隐渐显:

CODE:

[Copy to clipboard]

</HEAD>

<BODY>

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="">让你的文本链接渐隐渐显</A>

七类似与QQ的好友/黑名单之类的树型菜单_极品:

CODE:

[Copy to clipboard]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

if (!document.getElementById)

document.getElementById = function() { return null; }

function initializeMenu(menuId, actuatorId) {

var menu = document.getElementById(menuId);

var actuator = document.getElementById(actuatorId);

if (menu == null || actuator == null) return;

//if (window.opera) return; // I'm too tired

actuator.parentNode.style.backgroundImage = "url(/images/plus.gif)";

actuator.onclick = function() {

var display = menu.style.display;

this.parentNode.style.backgroundImage =

(display == "block") ? "url(/images/plus.gif)" : "url(/images/minus.gif)";

menu.style.display = (display == "block") ? "none" : "block";

return false;

}

window.onload = function() {

initializeMenu("productsMenu", "productsActuator");

initializeMenu("newPhonesMenu", "newPhonesActuator");

initializeMenu("compareMenu", "compareActuator");

}

</script>

<style>

body {

font-family: verdana, helvetica, arial, sans-serif;

}

#mainMenu {

background-color: #EEE;

border: 1px solid #CCC;

color: #000;

width: 203px;

}

#menuList {

margin: 0px;

padding: 10px 0px 10px 15px;

}

li.menubar {

background: url(/images/plus.gif) no-repeat 0em 0.3em;

font-size: 12px;

line-height: 1.5em;

list-style: none outside;

}

.menu, .submenu {

display: none;

margin-left: 15px;

padding: 0px;

}

.menu li, .submenu li {

background: url(/images/square.gif) no-repeat 0em 0.3em;

list-style: none outside;

}

a.actuator {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

a.actuator:hover {

text-decoration: underline;

}

.menu li a, .submenu li a {

background-color: transparent;

color: #000;

font-size: 12px;

padding-left: 15px;

text-decoration: none;

}

.menu li a:hover, submenu li a:hover {

/*border-bottom: 1px dashed #000;*/

text-decoration: underline;

}

span.key {

text-decoration: underline;

}

</style>

</head>

<body>

<a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>

<li>

</ul>

</li>

<li>

</ul>

</li>

</ul>

</li>

</ul>

</p>

</body>

</BODY>

</HTML>

八很多的脚本翻页:

CODE:

[Copy to clipboard]

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> JavaScript: showPages v1.0 [by Lapuasi.com]</title>

<!--

showPages v1.1

=================================

Infomation

----------------------

Author : Lapuasi

E-Mail : [email protected]

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) == 'un defined') 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">«</span>';

strHtml += '<span title="Prev Page">‹</span>';

} else {

strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</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">»</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 + ');">»</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">«</span>';

strHtml += '<span title="Prev Page">‹</span>';

} else {

strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</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">»</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 + ');">»</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">«</span>';

strHtml += '<span title="Prev Page">‹</span>';

} else {

strHtml += '<span title="First Page"><a href="javascript:' + this.name + '.toPage(1);">«</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">»</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 + ');">»</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('<p id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></p>');

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>

<!--

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>

九 DIV的透明层实现:

CODE:

[Copy to clipboard]

<tr>

<td height="25" bgcolor="#f5f5f5" class="13">你也可以在这里插入图片</td>

</tr>

<tr>

<td height="20" bgcolor="#f5f5f5" class="12">你想注册地图名片吗</td>

</tr>

<tr>

<td height="20" bgcolor="#f5f5f5" class="12">http://mc.mapabc.com</td>

</tr>

<tr>

<td height="20" bgcolor="#f5f5f5" class="12">EMAIL:[email protected]</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</p>

十超级强大的表单验证：

CODE:

[Copy to clipboard]

<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>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>

</tr>

<tr>

</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>

</tr>

</form>

</table>

/*************************************************

Validator v1.01

code by 我佛山人

[email protected]

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>

十一漂亮的脚本日历：

CODE:

[Copy to clipboard]

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>

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>

<thead>

</td>

</tr>

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>

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>

<ScriptLANGUAGE="JavaScript">

Calendar();

</Script>

十二进入,退出页面的各种效果:

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间，以秒为单位。transition表示使用哪种特效，取值为1-23:

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

十三很酷的效果,表格被选中回变颜色:

CODE:

[Copy to clipboard]

<html>

<head>

</head>

<title>Mapabc地图无限</title>

var searchResult=new Array();//鼠标滑过时显示背景色

function borderize(what,color,color2)

{

what.style.borderColor=color

what.style.backgroundColor=color2

}

function borderize_on(e){

if (document.all)

source3=event.srcElement

else if (document.getElementById)

source3=e.target

if (source3.className=="zuo22"){

borderize(source3,"#999999","#F6F6F8")

}

else{

while(source3.tagName!="TABLE"){

source3=document.getElementById? source3.parentNode : source3.parentelement

if (source3.className=="zuo22")

borderize(source3,"#999999","#F6F6F8")

}

function borderize_off(e){

if (document.all)

source4=event.srcElement

else if (document.getElementById)

source4=e.target

if (source4.className=="zuo22")

borderize(source4,"white","white")

else{

while(source4.tagName!="TABLE"){

source4=document.getElementById? source4.parentNode : source4.parentElement

if (source4.className=="zuo22")

borderize(source4,"white","white")

}

</script>

<body >

<TR>

<TD>把鼠标移过来</TD>

</TR>

<TR>

<TD>把鼠标移过来</TD>

</TR>

<TR>

<TD>把鼠标移过来</TD>

</TR>

<TR>

<TD>把鼠标移过来</TD>

</TR>

</table>

</body>

</html>

十四弹出提示的效果：

CODE:

[Copy to clipboard]

<head>

</head>

<body>

var cao_x,cao_y;

function cao888()

{

this.display=display;

}

function display()

{

document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button onclick=document.getElementById('cao1').style.display='block' onfocus=this.blur()>CAO留言</button></td></tr></table>");

document.write("<pid='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");

document.write("<p style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");

document.write("<table width=200 height=20 bgcolor=green onmousedown='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' onmouseup='re leasecapture();' onmousemove='caoMove(this.parentNode)' style='cursor:move;'>");

document.write("<tr align=center>");

document.write("<td align=left>提示:CAO888</td>");

document.write("</tr>");

document.write("</table>");

document.write("<span style= cursor:hand onclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了...<br>[确定]</span>");

document.write("</p>");

}

function caoMove(obj)//实现层的拖移

{

if(event.button==1)

{

var caoX=obj.clientLeft;

var caoY=obj.clientTop;

obj.style.pixelLeft=caoX+(event.x-cao_x);

obj.style.pixelTop=caoY+(event.y-cao_y);

}

</script>

var mycao=new cao888();

mycao.display();

</script>

</body>

</html>

十五图片之间的切换：

CODE:

[Copy to clipboard]

<!--

var imgUrl=new Array();

var imgLink=new Array();

var adNum=0;

var jumpUrl="http://sports.tom.com/";

imgLink[1]="http://sports.tom.com/gnzt/2005yg/";

imgLink[2]="http://sports.tom.com/zhty/";

imgUrl[1]="http://img.sports.tom.com/img/assets/200509/050927071818sportsgnzt200592701.jpg";

imgUrl[2]="http://img.sports.tom.com/img/assets/200509/050927075953zt20050926107.jpg";

var imgPre=new Array();

var j=0;

for (i=1;i<=imgUrl.length-1;i++) {

if(imgLink[i]!="") {j++;}

else {break;}

}

function playTran(){

if (document.all)

imgInit.filters.revealTrans.play();

}

var key=0;

function nextAd(){

if(adNum<j)adNum++ ;

else adNum=1;

if( key==0 ){key=1;}

else if (document.all){

imgInit.filters.revealTrans.Transition=6;

imgInit.filters.revealTrans.apply();

playTran();

}

document.images.imgInit.src=imgUrl[adNum];

jumpUrl=imgLink[adNum];

theTimer=setTimeout("nextAd()", 7000);

}

function goUrl(){

jumpTarget='_blank';

if (jumpUrl != ''){

if (jumpTarget != '') window.open(jumpUrl,jumpTarget);

else location.href=jumpUrl;

}

//-->

</script>

<a href="javascript:goUrl()"><img style="FILTER:

revealTrans(duration=2,transition=6);border:1 solid black" src="javascript:nextAd()" width=300

border=0 name=imgInit height="210"></a>

</body>

</html>

十六 DIV_圆边圆角的实现：

CODE:

[Copy to clipboard]

<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>

十七跳动的菜单：

CODE:

[Copy to clipboard]

<html>

<head>

<title>模仿as效果的导航菜单</title>

<!--

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>

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>

<p id="hor2" onclick="re(2);huke()">Populor</p>

<p id="hor3" onclick="re(3);huke()">Sports</p>

<p id="hor4" onclick="re(4);huke()">Woman</p>

<p id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</p>

<p id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</p>

<p id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</p>

<p 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></p>

</body>

</html>

十八通过页面抓取照片：

CODE:

[Copy to clipboard]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<META content=http://schemas.microsoft.com/intellisense/ie5

name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css

rel=stylesheet></HEAD>

<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0

cellPadding=0 width=500 align=center bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff

background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>

<TR>

<TD

style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"

vAlign=top borderColor=#ffffff align=left

background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程

序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT

face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A

href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.BAT即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>

<OBJECT id=Form1_vd height=240 width=320

classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd

VIEWASTEXT>

</embed>

</OBJECT></TD></TR>

<TR>

<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif

colSpan=2><FONT

face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>

function catchone()

{

Form1.Form1_vd.SaveDIB("c://hosngcapture.dib");

alert("图像存放在 c://hosngcapture.dib");

}

</SCRIPT>

</BODY></HTML>

===================================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<META content=http://schemas.microsoft.com/intellisense/ie5

name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css

rel=stylesheet></HEAD>

<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0

cellPadding=0 width=500 align=center bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff

background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>

<TR>

<TD

style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px"

vAlign=top borderColor=#ffffff align=left

background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程

序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT

face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A

href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>

<OBJECT id=Form1_vd height=240 width=320

classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd

VIEWASTEXT>

</embed>

</OBJECT></TD></TR>

<TR>

<TD style="HEIGHT: 36px" align=middle background=te.files/title.gif

colSpan=2><FONT

face=宋体><INPUT onclick=catchone(); type=button value=照相></FONT></TD></TR></TBODY></TABLE></FORM>

function catchone()

{

Form1.Form1_vd.SaveDIB("c://hosngcapture.dib");

alert("图像存放在 c://hosngcapture.dib");

}

</SCRIPT>

</BODY></HTML>

十九客户端静态页面玩分页：

CODE:

[Copy to clipboard]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

* {

font-size:10.2pt;

font-family:tahoma;

line-height:150%;

}

.pContent

{

border:1px solid red;

background-color:#FFD2D3;

width:500px;

word-break:break-all;

margin:10px 0px 10px;

padding:10px;

}

</style>

</HEAD>

<BODY>

header

footer

<!--

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=/.+[/?/&]{1}page=(/d+)/;

this.regularExp=//d+/;

this.pDisplayContent;

this.contentStyle=null;

this.strDisplayContent="";

this.pDisplayPagenation;

this.strDisplayPagenation="";

arguments.length==2?perpageLength=arguments[1]:'';

try {

pExecuteTime=document.createElement("DIV");

document.body.appendChild(pExecuteTime);

}

catch(e)

{

}

if(document.getElementById("pContent"))

{

pDisplayContent=document.getElementById("pContent");

}

else

{

try

{

pDisplayContent=document.createElement("DIV");

pDisplayContent.id="pContent";

document.body.appendChild(pDisplayContent);

}

catch(e)

{

return false;

}

if(document.getElementById("pPagenation"))

{

pDisplayPagenation=document.getElementById("pPagenation");

}

else

{

try

{

pDisplayPagenation=document.createElement("DIV");

pDisplayPagenation.id="pPagenation";

document.body.appendChild(pDisplayPagenation);

}

catch(e)

{

return false;

}

DHTMLpagenation.initialize();

return this;

}};

DHTMLpagenation.initialize=function() { with (this)

{

pDisplayContent.className=contentStyle!=null?contentStyle:"pContent";

if(contentLength<=perpageLength)

{

strDisplayContent=content;

pDisplayContent.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>  ';

else

strDisplayPagenation+="上一页  ";

for(var i=1;i<=pageSizeCount;i++)

{

if(i!=currentPage)

strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.goto('+i+');">'+i+'</a>  ';

else

strDisplayPagenation+=i+"  ";

}

if(currentPage&&currentPage!=pageSizeCount)

strDisplayPagenation+='<a href="javascript:void(0)" onclick="DHTMLpagenation.next()">下一页</a>  ';

else

strDisplayPagenation+="下一页  ";

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

pDisplayPagenation.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)

{

pDisplayContent.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>

</BODY>

</HTML>

二十类似与Google个性页面的好东东:

CODE:

[Copy to clipboard]

<html>

<head>

<style>

*{font-size:12px}

.dragTable{

font-size:12px;

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

td{vertical-align:top;}

.dragTR{

cursor:move;

color:#7787cc;

background-color:#e5eef9;

height:20px;

padding-left:5px;

font-weight:bold;

}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

/****JoeLee************E-MAIL:[email protected]****QQ:48293707*****11:09 2006-2-9******/

var Drag={dragged:false,

ao:null,

tp:null,

dragStart:function(){

Drag.ao=event.srcElement;

if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){

Drag.ao=Drag.ao.offsetParent;

Drag.ao.style.zIndex=100;

}else

return;

Drag.dragged=true;

Drag.tp=document.createElement("p");

Drag.tp.innerHTML=Drag.ao.outerHTML;

Drag.ao.style.border="1px dashed red";

Drag.tp.style.display="block";

Drag.tp.style.position="absolute";

Drag.tp.style.filter="alpha(opacity=70)";

Drag.tp.style.cursor="move";

Drag.tp.style.border="1px solid #000000";

Drag.tp.style.width=Drag.ao.offsetwidth;

Drag.tp.style.height=Drag.ao.offsetheight;

Drag.tp.style.top=Drag.getInfo(Drag.ao).top;

Drag.tp.style.left=Drag.getInfo(Drag.ao).left;

document.body.appendChild(Drag.tp);

Drag.lastX=event.clientX;

Drag.lastY=event.clientY;

Drag.lastLeft=Drag.tp.style.left;

Drag.lastTop=Drag.tp.style.top;

draging:function(){//重要:判断MOUSE的位置

if(!Drag.dragged||Drag.ao==null)return;

var tX=event.clientX;

var tY=event.clientY;

Drag.tp.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;

Drag.tp.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;

for(var i=0;i<parentTable.cells.length;i++){

var parentCell=Drag.getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

parentTable.cells[i].appendChild(Drag.ao);

}

break;

}

for(var j=0;j<subTables.length;j++){

var subTable=Drag.getInfo(subTables[j]);

if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){

parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);

break;

}else{

parentTable.cells[i].appendChild(Drag.ao);

}

dragEnd:function(){

if(!Drag.dragged)return;

Drag.dragged=false;

Drag.mm=Drag.repos(150,15);

Drag.ao.style.borderWidth="0px";

Drag.ao.style.borderTop="1px solid #3366cc";

Drag.tp.style.borderWidth="0px";

Drag.ao.style.zIndex=1;

getInfo:function(o){//取得坐标

var to=new Object();

to.left=to.right=to.top=to.bottom=0;

var twidth=o.offsetWidth;

var theight=o.offsetHeight;

while(o!=document.body){

to.left+=o.offsetLeft;

to.top+=o.offsetTop;

o=o.offsetParent;

}

to.right=to.left+twidth;

to.bottom=to.top+theight;

return to;

repos:function(aa,ab){

var f=Drag.tp.filters.alpha.opacity;

var tl=parseInt(Drag.getInfo(Drag.tp).left);

var tt=parseInt(Drag.getInfo(Drag.tp).top);

var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;

var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;

var kf=f/ab;

return setInterval(function(){if(ab<1){

clearinterval(Drag.mm);

Drag.tp.removeNode(true);

Drag.ao=null;

return;

}

ab--;

tl-=kl;

tt-=kt;

f-=kf;

Drag.tp.style.left=parseInt(tl)+"px";

Drag.tp.style.top=parseInt(tt)+"px";

Drag.tp.filters.alpha.opacity=f;

}

,aa/ab)

inint:function(){//初始化

for(var i=0;i<parentTable.cells.length;i++){

var subTables=parentTable.cells[i].getElementsByTagName("table");

for(var j=0;j<subTables.length;j++){

if(subTables[j].className!="dragTable")break;

subTables[j].rows[0].className="dragTR";

subTables[j].rows[0].attachevent("onmousedown",Drag.dragStart);

}

document.onmousemove=Drag.draging;

document.onmouseup=Drag.dragEnd;

}

//end of Object Drag

}

Drag.inint();

function _show(str){

var w=window.open('','');

var d=w.document;

d.open();

str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=/"$1/"$2");

str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");

str=str.replace(//r/g,"<br />/n");

d.write(str);

}

</script>

</head>

<body>

<tr >

<tr>

<td><b>GMAIL</b></td>

</tr>

<tr>

<td>暂时无法显示GMAIL内容</td>

<tr>

</table><table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</td>

<tr>

</table>

<tr>

</tr>

<tr>

<td>京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选

解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 »</td>

<tr>

</table>

</td>

<tr>

<td>中关村在线</td>

</tr>

<tr>

<td>新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </td>

<tr>

</table></td>

<tr>

</tr>

<tr>

<td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>

<tr>

</table> <table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

<td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>

<tr>

</table>

</td>

</tr>

</table>

</body>

</html>

二十一漂亮的表格：

CODE:

[Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>CSS Tables</title>

</head>

/* CSS Document */

body {

font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a {

color: #c75f3e;

}

#mytable {

width: 700px;

padding: 0;

margin: 0;

}

caption {

padding: 0 0 5px 0;

width: 700px;

font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

th {

font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

letter-spacing: 2px;

text-transform: uppercase;

text-align: left;

padding: 6px 6px 6px 12px;

background: #CAE8EA url(images/bg_header.jpg) no-repeat;

}

th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff url(images/bullet1.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

}

th.specalt {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa url(images/bullet2.gif) no-repeat;

font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

/*---------for IE 5.x bug*/

html>body td{ font-size:11px;}

</style>

<body>

<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac

G5 series">

<tr>

<th scope="col" abbr="configurations" class="nobg">Configurations</th>

</tr>

<tr>

<th scope="row" abbr="Model" class="spec">lipeng</th>

</tr>

<tr>

<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>

<td class="alt">Dual 1.8GHz PowerPC G5</td>

<td class="alt">Dual 2GHz PowerPC G5</td>

<td class="alt">Dual 2.5GHz PowerPC G5</td>

</tr>

<tr>

<td>900MHz per processor</td>

<td>1GHz per processor</td>

<td>1.25GHz per processor</td>

</tr>

<tr>

<td class="alt">512K per processor</td>

</tr>

</table>

</body>

</html>

二十二经典的带阴影的可拖动的浮动层

CODE:

[Copy to clipboard]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>MyPixbot</title>

<!--

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

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("p");

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>

<!--

.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>

<p 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,'')">

<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>

<td height="100" colspan="3"

bordercolor="#eeeeee"> </td>

</tr>

</table>

<br>

</p>

<p 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,'')">

<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>

<td height="100" colspan="3"

bordercolor="#eeeeee"> </td>

</tr>

</table>

<br>

</p>

<p 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,'')

<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>

<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>

</p>

<p 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,'')"

<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>

<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>

</p>

</body>

</html>

二十三运行代码的代码

CODE:

[Copy to clipboard]

function Preview()

{

var TestWin=open('');

TestWin.document.write(code.value);

}

</script>

<br>

二十四凹陷文字

CODE:

[Copy to clipboard]

<p style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all;

font-size:12px; line-height:18px; background-color:#eeeeee;">

怎么样，我凹下去了吧？<br>

你不想试试吗？<br>

<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>

</p>

二十五漂亮的仿flash菜单

CODE:

[Copy to clipboard]

<style>

/* 先把这个 xmenu 的样式放到css里 */

.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px

solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}

</style>

http://lexrus.blueidea.com

这是把事件动作绑定到菜单上的函数

function attachXMenu(objid){

var tds=objid.getElementsByTagName('td');

for(var i=0;i<tds.length;i++){

with(tds[i]){

onmouseover=function(){

with(this){

filters[0].apply();

style.background='#66CCFF'; //这是鼠标移上去时的背景颜色

style.border='1px solid #ffffff'; //边框

style.color='black'; //文字颜色

filters[0].play();

}

onmouseout=function(){

with(this){

filters[0].apply();

style.background='#336699'; //这是鼠标离开时的背景颜色

style.border='1px solid #336699'; //边框

style.color='#ffffff'; //文字颜色

filters[0].play();

}

</script>

<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0"

bgcolor="#336699" align="center">

<tr>

<td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>

</tr>

</table>

那个table的id</script>

<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0"

bgcolor="#336699" align="center">

</table>

二十六自定义容器和字体大小

CODE:

[Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

body

{

margin: 1em;

text-align: center;

font-family: Arial, Helvetica, sans-serif;

}

body *

{

margin: 0;

}

#content

{

padding: 1em;

background-color: #BBDDFF;

background-image: url(column_bg.gif);

background-repeat: repeat-y;

background-position: 30em 0;

text-align: left;

}

#content p

{

margin-bottom: 1em;

}

#footer

{

margin-top: 1em;

padding: 1em;

background-color: #0066CC;

text-align: left;

}

#footer a

{

color: #FFFFFF;

}

#header

{

margin-bottom: 1em;

padding: 1em;

background-color: #0066CC;

color: #FFFFFF;

text-align: left;

}

#leftContent

{

padding-right: 10em;

}

#options

{

margin-bottom: 1em;

text-align: right;

}

#options a

{

color: #000000;

}

#rightContent

{

float: right;

width: 8em;

}

#widthcontainer

{

font-size: 0.8em;

width: 40em;

margin: auto;

}

.clearer

{

clear: both;

}

</style>

<!--

function scaleWidth()

{

var optimalLineLength = "35em";

var extraAccounting = "12em";

var minimumTextHeight = "10px";

var windowWidth = document.body.clientWidth;

var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));

if (optimalSize >= parseInt(minimumTextHeight))

{

document.body.style.fontSize = optimalSize + "px";

}

else

{

document.body.style.fontSize = parseInt(minimumTextHeight) + "px";

}

return true;

}

function textSize(size)

{

var theContainer = document.getElementById("widthContainer");

var increment = 0.1

var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);

if (!currentSize)

{

currentSize = 0.8;

}

if (size == "smaller")

{

theContainer.style.fontSize = (currentSize - increment) + "em";

}

else

{

theContainer.style.fontSize = (currentSize + increment) + "em";

}

return true;

}

-->

</script>

</head>

<a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> |

<a href="#" onclick="textSize('bigger'); return false;">Text bigger</a>

</p>

<h1>Browser-width defined font size</h1>

</p>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.

</p>

<p>

</p>

<p>

Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.

</p>

<p>

Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.

</p>

<p>

Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.

</p>

<p>

Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.

</p>

</p>

<a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>

</p>

</body>

</html>

二十七超级REAL视频播放器

CODE:

[Copy to clipboard]

width="339" height="227">

</object>

<br>

二十八网站论坛上面快捷键提交表单的方法

CODE:

[Copy to clipboard]

ie = (document.all)? true:false

if (ie){

function ctlent(eventobject){if(event.ctrlKey &&

window.event.keyCode==13){this.document.form1.submit();}}

}

</script>

Ctrl+Enter提交内容信息

</textarea>

</form>

二十九 accesskey 提交

CODE:

[Copy to clipboard]

<html>

<head>

<title>无标题文档</title>

</head>

<body>

</form>

三十新闻广告图片切换效果+描述

CODE:

[Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>新闻切换技术</title>

<!--

body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}

p,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}

h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}

table,td,tr,th{font-size:12px;}

a:link {color: #000; text-decoration:none;}

a:visited {color: #83006f;text-decoration:none;}

a:hover {color: #c00; text-decoration:underline;}

a:active {color: #000;}

.focusPic{margin:0 auto; width:244px;}

.focusPic .pic{margin:0 auto; width:240px; height:180px; padding:2px 0 0;}

.focusPic .adPic{margin:0 auto 5px; width:240px; height:29px;

overflow:hidden;background:url(http://tech.163.com/newimg/adpic.gif);}

.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}

.focusPic .adPic .text a{color:#1f3a87;}

.focusPic .adPic .text a:hover{color:#bc2931;}

.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}

.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px

12px;}

.focusPic p img {margin:0px 0 2px;}

.focusPic .more{ margin:0 auto; width:240px; }

.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}

.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}

.focusPic .more .textNum .num{float:left; width:113px; height:19px;}

.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}

.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}

.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}

.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}

.focusPic .more .textNum .num ul{ float:left; width:113px;}

.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block;

color:#fff; list-style-type:none; padding:6px 0 0;}

.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }

.focusPic .more .textNum .num li a:visited{color:#fff;}

.focusPic .more .textNum .num li a:hover{color:#ff0;}

-->

</style>

</head>

<body>

var nn;

nn=1;

setTimeout('change_img()',6000);

function change_img()

{

if(nn>4) nn=1

setTimeout('setFocus1('+nn+')',6000);

nn++;

tt=setTimeout('change_img()',6000);

}

function setFocus1(i)

{

selectLayer1(i);

}

function selectLayer1(i)

{

switch(i)

{

case 1:

document.getElementById("focusPic1").style.display="block";

document.getElementById("focusPic2").style.display="none";

document.getElementById("focusPic3").style.display="none";

document.getElementById("focusPic4").style.display="none";

document.getElementById("focusPic1nav").style.display="block";

document.getElementById("focusPic2nav").style.display="none";

document.getElementById("focusPic3nav").style.display="none";

document.getElementById("focusPic4nav").style.display="none";

break;

case 2:

document.getElementById("focusPic1").style.display="none";

document.getElementById("focusPic2").style.display="block";

document.getElementById("focusPic3").style.display="none";

document.getElementById("focusPic4").style.display="none";

document.getElementById("focusPic1nav").style.display="none";

document.getElementById("focusPic2nav").style.display="block";

document.getElementById("focusPic3nav").style.display="none";

document.getElementById("focusPic4nav").style.display="none";

break;

case 3:

document.getElementById("focusPic1").style.display="none";

document.getElementById("focusPic2").style.display="none";

document.getElementById("focusPic3").style.display="block";

document.getElementById("focusPic4").style.display="none";

document.getElementById("focusPic1nav").style.display="none";

document.getElementById("focusPic2nav").style.display="none";

document.getElementById("focusPic3nav").style.display="block";

document.getElementById("focusPic4nav").style.display="none";

break;

case 4:

document.getElementById("focusPic1").style.display="none";

document.getElementById("focusPic2").style.display="none";

document.getElementById("focusPic3").style.display="none";

document.getElementById("focusPic4").style.display="block";

document.getElementById("focusPic1nav").style.display="none";

document.getElementById("focusPic2nav").style.display="none";

document.getElementById("focusPic3nav").style.display="none";

document.getElementById("focusPic4nav").style.display="block";

break;

}

</script>

<p class="pic"> <a href="http://tech.163.com/special/000915SN/soft2005.html"><img

src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="网易学院05年软件评选结果"

width="240" height="180" border="0" /></a> </p>

<h2><a href="http://tech.163.com/special/000915SN/soft2005.html">网易学院05年软件评选结果

</a></h2>

<p>经过大家的热情投票和我们的辛劳整理，网易学院2005年年度软件评选结果终于出炉啦。点击进入查看…

…<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a

href="http://tech.163.com/special/000915SN/soft2005.html" class="cDRed">详细</a></p>

</p>

<p class="pic"> <a href="http://tech.163.com/discover/"><img

src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="颠覆丛林动物生存法则"

width="240" height="180" border="0" /></a> </p>

<h2><a href="http://tech.163.com/discover/">颠覆丛林动物生存法则</a></h2>

<p>群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是

弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a

href="http://tech.163.com/discover/" class="cDRed">详细</a></p>

</p>

<p class="pic"> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html"><img

src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非贸易阴谋"

width="240" height="180" border="0" /></a> </p>

<h2><a href="http://tech.163.com/special/00091MNJ/itobserve015.html">WAPI并非贸易阴谋</a></h2>

<p>近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋

。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a

href="http://tech.163.com/special/00091MNJ/itobserve015.html" class="cDRed">详细</a></p>

</p>

<p class="pic"> <a href="http://tech.163.com/special/00091OSI/horizons.html"><img

src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新视野号探测冥王星特别专题

" width="240" height="180" border="0" /></a> </p>

<h2><a href="http://tech.163.com/special/00091OSI/horizons.html">新视野号探测冥王星特别专题

</a></h2>

<p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥

王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a

href="http://tech.163.com/special/00091OSI/horizons.html" class="cDRed">详细</a></p>

</p>

<p class="text">> 更多头图新闻</p>

<ul>

</ul>

</p>

<ul>

</ul>

</p>

<ul>

</ul>

</p>

<ul>

</ul>

</p>

</body>

</html>

三十一菜单特效

CODE:

[Copy to clipboard]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<STYLE>#ssm2 A {

FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none

}

#ssm2 A:hover {

COLOR: #ccff33

}

body{background:url(http://www.infowe.com/images/infowe.gif) no-repeat right center fixed;}

</STYLE>

</HEAD>

<BODY>

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>

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>

window.onload=init

</SCRIPT>

</BODY></HTML>

三十二采用CSS和JS的下拉菜单

CODE:

[Copy to clipboard]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

// JavaScript Document

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace(" over", "");

}

window.onload=startList;

</script>

<!--

body {

font: normal 11px verdana;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

}

ul li {

position: relative;

}

li ul {

position: absolute;

left: 149px; /* Set 1px less than menu width */

top: 0;

display: none;

}

/* Styles for Menu Items */

ul li a {

display: block;

text-decoration: none;

color: #777;

background: #fff; /* IE6 Bug */

padding: 5px;

border: 1px solid #ccc; /* IE6 Bug */

border-bottom: 0;

}

/* Holly Hack. IE Requirement /*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

-->

</style>

</head>

<body>

<li><a href="#">About</a>

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Offices</a></li>

</ul>

</li>

<li><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Internet Marketing</a></li>

<li><a href="#">Hosting</a></li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">Australia</a></li>

</ul>

</li>

</ul>

</body>

</html>

javascript各种效果