JavaScript经典效果集

JavaScript经典效果集 [转贴 2006-11-03 19:11:14 ] 发表者: qs12quexxxx

本帖子目录.

一实用且必用的小脚本代码
二鼠标旁边的提示信息,类似与163登录后的页面提示效果
三如果文字过长,则将过长的部分变成省略号显示
四滚动的图片
五接收键盘指令的脚本
六让你的文本链接渐隐渐显
七类似与QQ的好友/黑名单之类的树型菜单-----推荐
八很多的脚本翻页------推荐
九 DIV的透明层实现
十 JSP页面自动生成html页面/或任何格式页面-----推荐
十一超级强大的表单验证-----推荐
十二漂亮的脚本日历
十三进入,退出页面的各种效果!
十四很酷的效果,表格被选中回变颜色
十五弹出提示的效果
十六图片之间的切换
十七 DIV_圆边圆角的实现
十八跳动的菜单
十九通过页面抓取照片
二十客户端静态页面玩分页
二十一类似与google个性页面的好东东
二十二漂亮的表格
二十三经典的带阴影的可拖动的浮动层-----推荐
二十四运行代码的代码-
二十五凹陷文字
二十六漂亮的仿flash菜单
二十七自定义容器和字体大小
二十八超级REAL视频播放器
二十九网站论坛上面快捷键提交表单的方法
三十 accesskey 提交
三十一新闻广告图片切换效果+描述
三十二菜单特效
三十三采用CSS和JS的下拉菜单
三十四一个菜单
三十五滚屏显示
三十六制作特殊字的脚本
三十七美化列表
三十八 CSS模仿IE警告信息栏
三十九文字幻灯片
四十一个非常不错的loading 效果
四十一文字滚动
四十二可拖动窗口，附带鼠标控制渐变透明
四十三繁简体文字转换工具
四十四收集整理的四个方向的滚动
四十五将HTML自动转为JS代码
四十六锁定表列
四十七滚动的图片
四十八放大镜特效
四十九无名,感觉像黑克帝国
五十美丽的菜单
五十一没有控制拦的REALL播放器
五十二荧光效果
五十三滚动效果
五十四在网页中弹出其它的窗口

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

< embed src = " pnm://10.13.31.90/~kayvin/mihunji.rm " hidden = true autostart = true loop = true >

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

< script >
3

self.moveTo( 0 , 0 )
4

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

</ script >
6

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

< script language = vbscript > document.write now </ script >

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

< script > document.write(document.lastModified) </ script >

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

< a style ="cursor:hand" 　

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

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

< a style ="cursor:hand"

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

< a href =javascript:window.external.addChannel("typhoon.cdf") > 加入频道 </ a >

< a href ="[email]mailtkayvin@sohu.com[/email]" > 与我联系 </ a >

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

< script >

function see() {

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

today = new Date();

self.status = today.toString();

}

</ script >

< body onload =see() >

脚本7:关闭窗口的脚本

< a href =javascript:close() > [关闭窗口] </ a >

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

< script > function look() {

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

}

if (document.onkeydown == null )

{document.onkeydown = look}

</ script >

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

< input type =button value =后退 onclick =history.go(-1) >

< input type =button value =刷新 onclick =history.go(-0) >

< input type =button value =前进 onclick =history.go(+1) >

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

< script > function l()

{

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

}

setTimeout( " l() " , 4000 )

</ script >

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

< a href ="#" title ="这是提示" > tip </ a >

< script Language ="JavaScript" >

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

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( " <div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div> " );

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 >

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

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

overflow: hidden; text-overflow:ellipsis" >

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

</ DIV >

四滚动的图片

< script language = " javascript " >

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 divWidth = 220 // 每块图片占位宽

var divHeight = 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.divOuter.document.divAds " + i + " .left= " + divWidth * i)

}

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

eval( " document.divOuter.document.divAds " + i + " .left= " + divWidth * displayImgAmount)

}

} else {

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

eval( " document.all.divAds " + i + " .style.left= " + divWidth * i)

}

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

eval( " document.all.divAds " + i + " .style.left= " + divWidth * displayImgAmount)

}

function mvStart() {

timeID = setTimeout(moveLeftDiv,moveRelax)

}

function mvStop() {

clearTimeout(timeID)

}

function moveLeftDiv() {

if (ns4) {

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

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

}

startDivClipLeft = parseInt(eval( " document.divOuter.document.divAds " + startDnum + " .clip.left " ))

nextDivClipRight = parseInt(eval( " document.divOuter.document.divAds " + nextDnum + " .clip.right " ))

if (startDivClipLeft + moveStep > divWidth) {

eval( " document.divOuter.document.divAds " + nextDnum + " .clip.right= " + divWidth)

eval( " document.divOuter.document.divAds " + startDnum + " .left= " + divWidth * displayImgAmount)

eval( " document.divOuter.document.divAds " + parseInt((nextDnum + 1 ) % imgArr.length) + " .left=document.divOuter.document.divAds " + nextDnum + " .left+ " + divWidth)

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

startDnum = ( ++ startDnum) % imgArr.length

nextDnum = (startDnum + displayImgAmount) % imgArr.length

startDivClipLeft = moveStep - (divWidth - startDivClipLeft)

nextDivClipRight = moveStep - (divWidth - nextDivClipRight)

} else {

eval( " document.divOuter.document.divAds " + nextDnum + " .clip.left=0 " )

startDivClipLeft += moveStep

nextDivClipRight += moveStep

}

eval( " document.divOuter.document.divAds " + startDnum + " .clip.left= " + startDivClipLeft)

eval( " document.divOuter.document.divAds " + nextDnum + " .clip.right= " + nextDivClipRight)

} else {

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

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

}

startDivClipLeft = parseInt(eval( " document.all.divAds " + startDnum + " .currentStyle.clipLeft " ))

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

if (startDivClipLeft + moveStep > divWidth) {

eval( " document.all.divAds " + nextDnum + " .style.clip='rect(0, " + divWidth + " , " + divHeight + " ,0 " + " )' " )

eval( " document.all.divAds " + startDnum + " .style.left= " + divWidth * displayImgAmount)

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

startDnum = ( ++ startDnum) % imgArr.length

nextDnum = (startDnum + displayImgAmount) % imgArr.length

startDivClipLeft = moveStep - (divWidth - startDivClipLeft)

nextDivClipRight = moveStep - (divWidth - nextDivClipRight)

} else {

startDivClipLeft += moveStep

nextDivClipRight += moveStep

}

eval( " document.all.divAds " + startDnum + " .style.clip='rect(0, " + divWidth + " , " + divHeight + " , " + startDivClipLeft + " )' " )

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

}

if (outHover) {

mvStop()

} else {

mvStart()

}

function writeDivs() {

if (ns4) {

document.write( " <ilayer name=divOuter width=750 height= " + divHeight + " > " )

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

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

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

document.write( " </layer> " )

}

document.write( " </ilayer> " )

document.close()

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

eval( " document.divOuter.document.divAds " + i + " .clip.right=0 " )

}

} else {

document.write( " <div id=divOuter style='position:relative' width=750 height= " + divHeight + " > " )

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

document.write( " <div id=divAds " + i + " style='position:absolute;clip:rect(0, " + divWidth + " , " + divHeight + " ,0)'> " )

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

document.write( " </div> " )

}

document.write( " </div> " )

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

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

}

</ script >

< BODY onload = javascript:mvStart() >

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

五接收键盘指令的脚本

按A就会跳转到地图名片的网页,请按A

< SCRIPT language = " JavaScript " >

<!--

var hotkey = 97

var destination = " [url]http://mc.mapabc.com[/url] "

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

onkeydown = " javascript:onenter(); "

function onenter() {

if (event.keyCode == 13 ) {

alert( " 回车 " );

}

</ SCRIPT >

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

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

< HTML >

< HEAD >

< TITLE > New Document </ TITLE >

< META NAME ="Generator" CONTENT ="EditPlus" >

< META NAME ="Author" CONTENT ="" >

< META NAME ="Keywords" CONTENT ="" >

< META NAME ="Description" CONTENT ="" >

</ HEAD >

< BODY >

< script language ="javascript" type ="text/javascript" >

startColor = " #671700 " ; // 定义链接颜色

endColor = " #D8D1C5 " ; // 定义要渐变到最后的颜色

stepIn = 17 ;

stepOut = 23 ;

定义是否让所有的文本链接自动渐变，true为是，false为否

autoFade = true ;

在这里定义css样式里的类class：fade，如果为true，那么你要将要渐变的链接上加上此fade样式

sloppyClass = false ;

hexa = new makearray( 16 );

for ( var i = 0 ; i < 10 ; i ++ )

hexa[i] = i;

hexa[ 10 ] = " a " ; hexa[ 11 ] = " b " ; hexa[ 12 ] = " c " ;

hexa[ 13 ] = " d " ; hexa[ 14 ] = " e " ; hexa[ 15 ] = " f " ;

document.onmouseover = domouseover;

document.onmouseout = domouseout;

startColor = dehexize(startColor.toLowerCase());

endColor = dehexize(endColor.toLowerCase());

var fadeId = new Array();

function dehexize(Color) {

var colorArr = new makearray( 3 );

for (i = 1 ; i < 7 ; i ++ ) {

for (j = 0 ; j < 16 ; j ++ ) {

if (Color.charAt(i) == hexa[j]) {

if (i % 2 != 0 )

colorArr[Math.floor((i - 1 ) / 2 )] = eval(j) * 16 ;

else

colorArr[Math.floor((i - 1 ) / 2 )] += eval(j);

}

return colorArr;

}

function domouseover() {

if (document.all) {

var srcElement = event.srcElement;

if ((srcElement.tagName == " A " && autoFade) || srcElement.className == " fade " || (sloppyClass && srcElement.className.indexOf( " fade " ) != - 1 ))

fade(startColor,endColor,srcElement.uniqueID,stepIn);

}

function domouseout() {

if (document.all) {

var srcElement = event.srcElement;

if ((srcElement.tagName == " A " && autoFade) || srcElement.className == " fade " || (sloppyClass && srcElement.className.indexOf( " fade " ) != - 1 ))

fade(endColor,startColor,srcElement.uniqueID,stepOut);

}

function makearray(n) {

this .length = n;

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

this [i] = 0 ;

return this ;

}

function hex(i) {

if (i < 0 )

return " 00 " ;

else if (i > 255 )

return " ff " ;

else

return "" + hexa[Math.floor(i / 16 )] + hexa[i % 16 ];}

function setColor(r, g, b, element) {

var hr = hex(r); var hg = hex(g); var hb = hex(b);

element.style.color = " # " + hr + hg + hb;

}

function fade(s,e, element,step) {

var sr = s[ 0 ]; var sg = s[ 1 ]; var sb = s[ 2 ];

var er = e[ 0 ]; var eg = e[ 1 ]; var eb = e[ 2 ];

if (fadeId[ 0 ] != null && fade[ 0 ] != element) {

setColor(sr,sg,sb,eval(fadeId[ 0 ]));

var i = 1 ;

while (i < fadeId.length) {

clearTimeout(fadeId[i]);

i ++ ;

}

for ( var i = 0 ; i <= step; i ++ ) {

fadeId[i + 1 ] = setTimeout( " setColor(Math.floor( " + sr + " *(( " + step + " - " + i + " )/ " + step + " ) + " + er + " * ( " + i + " / " +

step + " )),Math.floor( " + sg + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eg + " * ( " + i + " / " + step +

" )),Math.floor( " + sb + " * (( " + step + " - " + i + " )/ " + step + " ) + " + eb + " * ( " + i + " / " + step + " )), " + element + " ); " ,i * step);

}

fadeId[ 0 ] = element;

}

</ script >

</ BODY >

</ HTML >

< A href ="" > 让你的文本链接渐隐渐显 </ A >

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

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

< HTML >

< HEAD >

< TITLE > New Document </ TITLE >

< META NAME ="Generator" CONTENT ="EditPlus" >

< META NAME ="Author" CONTENT ="" >

< META NAME ="Keywords" CONTENT ="" >

< META NAME ="Description" CONTENT ="" >

</ HEAD >

< BODY >

< script >

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 >

< div id ="mainMenu" >

< ul id ="menuList" >

< li class ="menubar" >

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

< ul id ="productsMenu" class ="menu" >

< li >

< a href ="#" id ="newPhonesActuator" class ="actuator" > 我的好友 </ a >

< ul id ="newPhonesMenu" class ="submenu" >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 张三[10000001] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 李四[10000002] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 张三[10000001] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 李四[10000002] </ a ></ li >

</ ul >

</ li >

< li >

< a href ="#" id ="compareActuator" class ="actuator" > 陌生人 </ a >

< ul id ="compareMenu" class ="submenu" >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 张三[10000001] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 李四[10000002] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 张三[10000001] </ a ></ li >

< li >< a href ="[url]http://mc.mapabc.com/mapcard/card.jsp?pp=1000000001[/url]" > 李四[10000002] </ a ></ li >

</ ul >

</ li >

</ ul >

</ li >

</ ul >

</ div >

</ body >

</ BODY >

</ HTML >

八很多的脚本翻页

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

< html xmlns ="[url]http://www.w3.org/1999/xhtml[/url]" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />

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

< script language ="JavaScript" >

<!--

showPages v1.1

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

Infomation

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

Author : Lapuasi

E-Mail : [email]lapuasi@gmail.com[/email]

Web : [url]http://www.lapuasi.com[/url]

Date : 2005-11-17

Example

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

var pg = new showPages('pg');

pg.pageCount = 12; //定义总页数(必要)

pg.argName = 'p'; //定义参数名(可选,缺省为page)

pg.printHtml(); //显示页数

Supported in Internet Explorer, Mozilla Firefox

function showPages(name) { // 初始化属性

this .name = name; // 对象名称

this .page = 1 ; // 当前页数

this .pageCount = 1 ; // 总页数

this .argName = 'page'; // 参数名

this .showTimes = 1 ; // 打印次数

}

showPages.prototype.getPage = function () { // 丛url获得当前页数,如果变量重复只获取最后一个

var args = location.search;

var reg = new RegExp('[\ ?& ] ? ' + this .argName + ' = ([ ^& ] * )[ & $] ? ', 'gi');

var chk = args.match(reg);

this .page = RegExp.$ 1 ;

}

showPages.prototype.checkPages = function () { // 进行当前页数和总页数的验证

if (isNaN(parseInt( this .page))) this .page = 1 ;

if (isNaN(parseInt( this .pageCount))) this .pageCount = 1 ;

if ( this .page < 1 ) this .page = 1 ;

if ( this .pageCount < 1 ) this .pageCount = 1 ;

if ( this .page > this .pageCount) this .page = this .pageCount;

this .page = parseInt( this .page);

this .pageCount = parseInt( this .pageCount);

}

showPages.prototype.createHtml = function (mode) { // 生成html代码

var strHtml = '', prevPage = this .page - 1 , nextPage = this .page + 1 ;

if (mode == '' || typeof (mode) == 'undefined') mode = 0 ;

switch (mode) {

case 0 : // 模式1 (页数,首页,前页,后页,尾页)

strHtml += ' < span class = " count " > Pages: ' + this .page + ' / ' + this .pageCount + ' </ span > ';

strHtml += ' < span class = " number " > ';

if (prevPage < 1 ) {

strHtml += ' < span title = " First Page " >?</ span > ';

strHtml += ' < span title = " Prev Page " >& S249; </ 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 + '); " >& S249; </ 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 " >& S250; </ span > ';

strHtml += ' < span title = " Last Page " >?</ span > ';

} else {

strHtml += ' < span title = " Next Page " >< a href = " javascript:' + this.name + '.toPage(' + nextPage + '); " >& S250; </ 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 " >& S249; </ 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 + '); " >& S249; </ 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 " >& S250; </ span > ';

strHtml += ' < span title = " Last Page " >?</ span > ';

} else {

strHtml += ' < span title = " Next Page " >< a href = " javascript:' + this.name + '.toPage(' + nextPage + '); " >& S250; </ 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 " >& S249; </ 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 + '); " >& S249; </ 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 " >& S250; </ span > ';

strHtml += ' < span title = " Last Page " >?</ span > ';

} else {

strHtml += ' < span title = " Next Page " >< a href = " javascript:' + this.name + '.toPage(' + nextPage + '); " >& S250; </ 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(' < div id = " pages_' + this.name + '_' + this.showTimes + ' " class = " pages " ></ div > ');

document.getElementById('pages_' + this .name + '_' + this .showTimes).innerHTML = this .createHtml(mode);

}

showPages.prototype.formatInputPage = function (e) { // 限定输入页数格式

var ie = navigator.appName == " Microsoft Internet Explorer " ? true : false ;

if ( ! ie) var key = e.which;

else var key = event.keyCode;

if (key == 8 || key == 46 || (key >= 48 && key <= 57 )) return true ;

return false ;

}

// -->

</ script >

< style >

/* Pages Main Tyle */

.pages {

color : #000000 ;

cursor : default ;

font-size : 10px ;

font-family : Tahoma, Verdana ;

padding : 3px 0px 3px 0px ;

}

.pages .count, .pages .number, .pages .arrow {

color : #000000 ;

font-size : 10px ;

background-color : #F7F7F7 ;

border : 1px solid #CCCCCC ;

}

/* Page and PageCount Style */

.pages .count {

font-weight : bold ;

border-right : none ;

padding : 2px 10px 1px 10px ;

}

/* Mode 0,1,2 Style (Number) */

.pages .number {

font-weight : normal ;

padding : 2px 10px 1px 10px ;

}

.pages .number a, .pages .number span {

font-size : 10px ;

}

.pages .number span {

color : #999999 ;

margin : 0px 3px 0px 3px ;

}

.pages .number a {

color : #000000 ;

text-decoration : none ;

}

.pages .number a:hover {

color : #0000ff ;

}

/* Mode 3 Style (Arrow) */

.pages .arrow {

font-weight : normal ;

padding : 0px 5px 0px 5px ;

}

.pages .arrow a, .pages .arrow span {

font-size : 10px ;

font-family : Webdings ;

}

.pages .arrow span {

color : #999999 ;

margin : 0px 5px 0px 5px ;

}

.pages .arrow a {

color : #000000 ;

text-decoration : none ;

}

.pages .arrow a:hover {

color : #0000ff ;

}

/* Mode 4 Style (Select) */

.pages select, .pages input {

color : #000000 ;

font-size : 10px ;

font-family : Tahoma, Verdana ;

}

/* Mode 5 Style (Input) */

.pages .input input.ititle, .pages .input input.itext, .pages .input input.icount {

color : #666666 ;

font-weight : bold ;

background-color : #F7F7F7 ;

border : 1px solid #CCCCCC ;

}

.pages .input input.ititle {

width : 70px ;

text-align : right ;

border-right : none ;

}

.pages .input input.itext {

width : 25px ;

color : #000000 ;

text-align : right ;

border-left : none ;

border-right : none ;

}

.pages .input input.icount {

width : 35px ;

text-align : left ;

border-left : none ;

}

.pages .input input.ibutton {

height : 17px ;

color : #FFFFFF ;

font-weight : bold ;

font-family : Verdana ;

background-color : #999999 ;

border : 1px solid #666666 ;

padding : 0px 0px 2px 1px ;

margin-left : 2px ;

cursor : hand ;

}

/* body */

body {

font-size : 12px ;

}

</ style >

</ head >

< body >

< script language ="JavaScript" >

<!--

var pg = new showPages('pg');

pg.pageCount = 12 ; // 定义总页数(必要)

// pg.argName = 'p'; // 定义参数名(可选,默认为page)

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood Default');

pg.printHtml();

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 0 ');

pg.printHtml( 0 );

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 1 ');

pg.printHtml( 1 );

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 2 ');

pg.printHtml( 2 );

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 3 (only IE)');

pg.printHtml( 3 );

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 4 ');

pg.printHtml( 4 );

document.write(' < br > Show Times: ' + pg.showTimes + ', Mood 5 ');

pg.printHtml( 5 );

// -->

</ script >

</ body >

</ html >

九 DIV的透明层实现

< body bgcolor ="#ff0ddd" >

< div id ="Layer1" style ="position:absolute; width:260px; height:115px; z-index:1; left: 50px; top: 77px; filter:Alpha(opacity=30)" >

< table width ="96%" border ="1" cellpadding ="1" cellspacing ="1" bordercolor ="#FFFFFF" bgcolor ="#999999" >

< 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" > [url]http://mc.mapabc.com </ td > [/url]

</ tr >

< tr >

< td height ="20" bgcolor ="#f5f5f5" class ="12" > EMAIL:lipeng@mapabc.com </ td >

</ tr >

< tr >

< td height ="20" bgcolor ="#f5f5f5" class ="12" > 地址 </ td >

</ tr >

< tr >

< td height ="20" bgcolor ="#f5f5f5" class ="12" > 邮编 </ td >

</ tr >

</ table >

</ div >

十 JSP页面自动生成html页面/或任何格式页面

先建立一个模本页面:template.htm

< html >

< head >

< title > ###title### </ title >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >

< LINK href ="../css.css" rel =stylesheet type =text/css >

</ head >

< body >

< table width ="500" border ="0" align ="center" cellpadding ="0" cellspacing ="2" >

< tr >

< td align ="center" > ###title### </ td >

</ tr >

< tr >

< td align ="center" > 作者：###author### </ td >

</ tr >

< tr >

< td > ###content###

</ td >

</ tr >

</ table >

</ body >

</ html >

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

再写一个JSP页面: buildhtml.jsp

<% @ page contentType = " text/html; charset=gb2312 " import = " java.util.*,java.io.* " %>

try{

String title = " 李鹏的jsp生成静态html文件 " ;

String content = " 小样，还搞不定你？ " ;

String editer = " hpsoft " ;

String filePath = "" ;

filePath = request.getRealPath( " / " ) + " template.htm " ;

out.print(filePath);

String templateContent = "" ;

FileInputStream fileinputstream = new FileInputStream(filePath); // 读取模块文件

int lenght = fileinputstream.available();

byte bytes[] = new byte [lenght];

fileinputstream.read(bytes);

fileinputstream.close();

templateContent = new String (bytes);

out.print(templateContent);

templateContent = templateContent.replaceAll( " ###title### " ,title);

templateContent = templateContent.replaceAll( " ###content### " ,content);

templateContent = templateContent.replaceAll( " ###author### " ,editer); // 替换掉模块中相应的地方

out.print(templateContent);

// 根据时间得文件名

Calendar calendar = Calendar.getInstance();

String fileame = String .valueOf(calendar.getTimeInMillis()) + " .html " ;

fileame = request.getRealPath( " / " ) + fileame; // 生成的html文件保存路径

FileOutputStream fileoutputstream = new FileOutputStream(fileame); // 建立文件输出流

out.print( " 文件输出路径:<br> " );

out.print(fileame);

byte tag_bytes[] = templateContent.getBytes();

fileoutputstream.write(tag_bytes);

fileoutputstream.close();

}

catch(Exception e){

out.print(e.toString());

}

十一超级强大的表单验证

< title > 表单验证类 Validator v1.01 </ title >

< style >

body,td { font : normal 12px Verdana ; color : #333333 }

input,textarea,select,td { font : normal 12px Verdana ; color : #333333 ; border : 1px solid #999999 ; background : #ffffff }

table { border-collapse : collapse ; }

td { padding : 3px }

input { height : 20 ; }

textarea { width : 80% ; height : 50px ; overfmin : auto ; }

form { display : inline }

</ style >

< table align ="center" >

< form name ="theForm" id ="demo" action ="" method ="get" onSubmit ="return Validator.Validate(this,2)" >

< tr >

< td > 真实姓名： </ td >< td >< input name ="Name" dataType ="Chinese" msg ="真实姓名只允许中文" ></ td >

</ tr >

< tr >

< td > 英文名： </ td >< td >< input name ="Nick" dataType ="English" require ="false" msg ="英文名只允许英文字母" ></ td >

</ tr >

< tr >

< td > 主页： </ td >< td >< input name ="Homepage" require ="false" dataType ="Url" msg ="非法的Url" ></ td >

</ tr >

< tr >

< td > 密码： </ td >< td >< input name ="Password" dataType ="SafeString" msg ="密码不符合安全规则" type ="password" ></ td >

</ tr >

< tr >

< td > 重复： </ td >< td >< input name ="Repeat" dataType ="Repeat" to ="Password" msg ="两次输入的密码不一致" type ="password" ></ td >

</ tr >

< tr >

< td > 信箱： </ td >< td >< input name ="Email" dataType ="Email" msg ="信箱格式不正确" ></ td >

</ tr >

< tr >

< td > 信箱： </ td >< td >< input name ="Email" dataType ="Repeat" to ="Email" msg ="两次输入的信箱不一致" ></ td >

</ tr >

< tr >

< td > QQ： </ td >< td >< input name ="QQ" require ="false" dataType ="QQ" msg ="QQ号码不存在" ></ td >

</ tr >

< tr >

< td > 身份证： </ td >< td >< input name ="Card" dataType ="IdCard" msg ="身份证号码不正确" ></ td >

</ tr >

< tr >

< td > 年龄： </ td >< td >< input name ="Year" dataType ="Range" msg ="年龄必须在18~28之间" min ="18" max ="28" ></ td >

</ tr >

< tr >

< td > 年龄1： </ td >< td >< input name ="Year1" require ="false" dataType ="Compare" msg ="年龄必须在18以上" to ="18" operator ="GreaterThanEqual" ></ td >

</ tr >

< tr >

< td > 电话： </ td >< td >< input name ="Phone" require ="false" dataType ="Phone" msg ="电话号码不正确" ></ td >

</ tr >

< tr >

< td > 手机： </ td >< td >< input name ="Mobile" require ="false" dataType ="Mobile" msg ="手机号码不正确" ></ td >

</ tr >

< tr >

< td > 生日： </ td >< td >< input name ="Birthday" dataType ="Date" format ="ymd" msg ="生日日期不存在" ></ td >

</ tr >

< tr >

< td > 邮政编码： </ td >< td >< input name ="Zip" dataType ="Custom" regexp ="^[1-9]\d{5}$" msg ="邮政编码不存在" ></ td >

</ tr >

< tr >

< td > 邮政编码： </ td >< td >< input name ="Zip1" dataType ="Zip" msg ="邮政编码不存在" ></ td >

</ tr >

< tr >

< td > 操作系统： </ td >< td >< select name ="Operation" dataType ="Require" msg ="未选择所用操作系统" >< option value ="" > 选择您所用的操作系统 </ option >< option value ="Win98" > Win98 </ option >< option value ="Win2k" > Win2k </ option >< option value ="WinXP" > WinXP </ option ></ select ></ td >

</ tr >

< tr >

< td > 所在省份： </ td >< td > 广东 < input name ="Province" value ="1" type ="radio" > 陕西 < input name ="Province" value ="2" type ="radio" > 浙江 < input name ="Province" value ="3" type ="radio" > 江西 < input name ="Province" value ="4" type ="radio" dataType ="Group" msg ="必须选定一个省份" ></ td >

</ tr >

< tr >

< td > 爱好： </ td >< td > 运动 < input name ="Favorite" value ="1" type ="checkbox" > 上网 < input name ="Favorite" value ="2" type ="checkbox" > 听音乐 < input name ="Favorite" value ="3" type ="checkbox" > 看书 < input name ="Favorite" value ="4" type ="checkbox" " dataType ="Group" min ="2" max ="3" msg ="必须选择2~3种爱好" ></ td >

</ tr >

< td > 自我介绍： </ td >< td >< textarea name ="Description" dataType ="Limit" max ="10" msg ="自我介绍内容必须在10个字之内" > 中文是一个字 </ textarea ></ td >

</ tr >

< td > 自传： </ td >< td >< textarea name ="History" dataType ="LimitB" min ="3" max ="10" msg ="自传内容必须在[3,10]个字节之内" > 中文是两个字节t </ textarea ></ td >

</ tr >

< tr >

< td colspan ="2" >< input name ="Submit" type ="submit" value ="确定提交" >< input onClick ="Validator.Validate(document.getElementById('demo'))" value ="检验模式1" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),2)" value ="检验模式2" type ="button" >< input onClick ="Validator.Validate(document.getElementById('demo'),3)" value ="检验模式3" type ="button" ></ td >

</ tr >

</ form >

</ table >

< script >

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

Validator v1.01

code by 我佛山人

[email]wfsr@cunite.com[/email]

[url]http://www.cunite.com[/url]

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

Validator = {

Require : / . +/ ,

Email : /^ \w + ([ -+ .]\w + ) * @\w + ([ - .]\w + ) * \.\w + ([ - .]\w + ) * $ / ,

Phone : /^ (($\d { 3 } $) | (\d { 3 } \ - )) ? ($ 0 \d { 2 , 3 } $ | 0 \d { 2 , 3 } - ) ? [ 1 - 9 ]\d { 6 , 7 } $ / ,

Mobile : /^ (($\d { 3 } $) | (\d { 3 } \ - )) ? 13 \d { 9 } $ / ,

Url : /^ http:\ / \ / [A - Za - z0 - 9 ] + \.[A - Za - z0 - 9 ] + [\ /= \ ?% \ -& _ ~ `@[\]\': +! ] * ([ ^<> \ " \ " ]) * $ / ,

IdCard : /^ \d { 15 } (\d { 2 } [A - Za - z0 - 9 ]) ? $ / ,

Currency : /^ \d + (\.\d + ) ? $ / ,

Number : /^ \d + $ / ,

Zip : /^ [ 1 - 9 ]\d { 5 } $ / ,

QQ : /^ [ 1 - 9 ]\d { 4 , 8 } $ / ,

Integer : /^ [ - \ + ] ? \d + $ / ,

Double : /^ [ - \ + ] ? \d + (\.\d + ) ? $ / ,

English : /^ [A - Za - z] + $ / ,

Chinese : /^ [\u0391 - \uFFE5] + $ / ,

UnSafe : /^ (([A - Z] *| [a - z] *| \d *| [ - _\ ~! @#\$ % \ ^& \ * \.\[\]\ {\} <> \ ? \\\ / \'\ " ]*)|.{0,5})$|\s/,

IsSafe : function(str){return !this.UnSafe.test(str);},

SafeString : " this .IsSafe(value) " ,

Limit : " this .limit(value.length,getAttribute('min'), getAttribute('max')) " ,

LimitB : " this .limit( this .LenB(value), getAttribute('min'), getAttribute('max')) " ,

Date : " this .IsDate(value, getAttribute('min'), getAttribute('format')) " ,

Repeat : " value == document.getElementsByName(getAttribute('to'))[ 0 ].value " ,

Range : " getAttribute('min') < value && value < getAttribute('max') " ,

Compare : " this .compare(value,getAttribute('operator'),getAttribute('to')) " ,

Custom : " this .Exec(value, getAttribute('regexp')) " ,

Group : " this .MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max')) " ,

ErrorItem : [document.forms[0]],

ErrorMessage : [ " 以下原因导致提交失败：\t\t\t\t " ],

Validate : function(theForm, mode){

var obj = theForm || event.srcElement;

var count = obj.elements.length;

this.ErrorMessage.length = 1;

this.ErrorItem.length = 1;

this.ErrorItem[0] = obj;

for(var i=0;i<count;i++){

with(obj.elements[i]){

var _dataType = getAttribute( " dataType " );

if(typeof(_dataType) == " object " || typeof(this[_dataType]) == " undefined " ) continue;

this.ClearState(obj.elements[i]);

if(getAttribute( " require " ) == " false " && value == "" ) continue;

switch(_dataType){

case " Date " :

case " Repeat " :

case " Range " :

case " Compare " :

case " Custom " :

case " Group " :

case " Limit " :

case " LimitB " :

case " SafeString " :

if(!eval(this[_dataType])) {

this.AddError(i, getAttribute( " msg " ));

}

break;

default :

if(!this[_dataType].test(value)){

this.AddError(i, getAttribute( " msg " ));

}

break;

}

if(this.ErrorMessage.length > 1){

mode = mode || 1;

var errCount = this.ErrorItem.length;

switch(mode){

case 2 :

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

this.ErrorItem[i].style.color = " red " ;

case 1 :

alert(this.ErrorMessage.join( " \n " ));

this.ErrorItem[1].focus();

break;

case 3 :

for(var i=1;i<errCount;i++){

try{

var span = document.createElement( " SPAN " );

span.id = " __ErrorMessagePanel " ;

span.style.color = " red " ;

this.ErrorItem[i].parentNode.appendChild(span);

span.innerHTML = this.ErrorMessage[i].replace(/\d+:/, " * " );

}

catch(e){alert(e.description);}

}

this.ErrorItem[1].focus();

break;

default :

alert(this.ErrorMessage.join( " \n " ));

break;

}

return false;

}

return true;

limit : function(len,min, max){

min = min || 0;

max = max || Number.MAX_VALUE;

return min <= len && len <= max;

LenB : function(str){

return str.replace(/[^\x00-\xff]/g, " ** " ).length;

ClearState : function(elem){

with(elem){

if(style.color == " red " )

style.color = "" ;

var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];

if(lastNode.id == " __ErrorMessagePanel " )

parentNode.removeChild(lastNode);

}

AddError : function(index, str){

this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];

this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + " : " + str;

Exec : function(op, reg){

return new RegExp(reg, " g " ).test(op);

compare : function(op1,operator,op2){

switch (operator) {

case " NotEqual " :

return (op1 != op2);

case " GreaterThan " :

return (op1 > op2);

case " GreaterThanEqual " :

return (op1 >= op2);

case " LessThan " :

return (op1 < op2);

case " LessThanEqual " :

return (op1 <= op2);

default:

return (op1 == op2);

}

MustChecked : function(name, min, max){

var groups = document.getElementsByName(name);

var hasChecked = 0;

min = min || 1;

max = max || groups.length;

for(var i=groups.length-1;i>=0;i--)

if(groups[i].checked) hasChecked++;

return min <= hasChecked && hasChecked <= max;

IsDate : function(op, formatString){

formatString = formatString || " ymd " ;

var m, year, month, day;

switch(formatString){

case " ymd " :

m = op.match(new RegExp( " ^ ((file: // 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( " ^(file://d{1,2})([-./])(//d{1,2})//2((//d{4})|(//d{2}))$ " ));

if (m == null ) return false ;

day = m[ 1 ];

month = m[ 3 ] -- ;

year = (m[ 5 ].length == 4 ) ? m[ 5 ] : GetFullYear(parseInt(m[ 6 ], 10 ));

break ;

default :

break ;

}

if ( ! parseInt(month)) return false ;

month = month == 12 ? 0 :month;

var date = new Date(year, month, day);

return ( typeof (date) == " object " && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());

function GetFullYear(y) { return ((y < 30 ? " 20 " : " 19 " ) + y) | 0 ;}

}

</ script >

十二漂亮的脚本日历

< Script LANGUAGE ="JavaScript" >

var months = new Array( " 一 " , " 二 " , " 三 " , " 四 " , " 五 " , " 六 " , " 七 " , " 八 " , " 九 " , " 十 " , " 十一 " , " 十二 " );

var daysInMonth = new Array( 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 );

var days = new Array( " 日 " , " 一 " , " 二 " , " 三 " , " 四 " , " 五 " , " 六 " );

var classTemp;

var today = new getToday();

var year = today.year;

var month = today.month;

var newCal;

function getDays(month, year) {

if ( 1 == month) return (( 0 == year % 4 ) && ( 0 != (year % 100 ))) || ( 0 == year % 400 ) ? 29 : 28 ;

else return daysInMonth[month];

}

function getToday() {

this .now = new Date();

this .year = this .now.getFullYear();

this .month = this .now.getMonth();

this .day = this .now.getDate();

}

function Calendar() {

newCal = new Date(year,month, 1 );

today = new getToday();

var day = - 1 ;

var startDay = newCal.getDay();

var endDay = getDays(newCal.getMonth(), newCal.getFullYear());

var daily = 0 ;

if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth()))

{

day = today.day;

}

var caltable = document.all.caltable.tBodies.calendar;

var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear());

for ( var intWeek = 0 ; intWeek < caltable.rows.length;intWeek ++ )

for ( var intDay = 0 ;intDay < caltable.rows[intWeek].cells.length;intDay ++ )

{

var cell = caltable.rows[intWeek].cells[intDay];

var montemp = (newCal.getMonth() + 1 ) < 10 ? ( " 0 " + (newCal.getMonth() + 1 )):(newCal.getMonth() + 1 );

if ((intDay == startDay) && ( 0 == daily)) { daily = 1 ;}

var daytemp = daily < 10 ? ( " 0 " + daily):(daily);

var d = " < " + newCal.getFullYear() + " - " + montemp + " - " + daytemp + " > " ;

if (day == daily) cell.className = " DayNow " ;

else if (intDay == 6 ) cell.className = " DaySat " ;

else if (intDay == 0 ) cell.className = " DaySun " ;

else cell.className = " Day " ;

if ((daily > 0 ) && (daily <= intDaysInMonth))

{

cell.innerText = daily;

daily ++ ;

} else

{

cell.className = " CalendarTD " ;

cell.innerText = "" ;

}

document.all.year.value = year;

document.all.month.value = month + 1 ;

}

function subMonth()

{

if ((month - 1 ) < 0 )

{

month = 11 ;

year = year - 1 ;

} else

{

month = month - 1 ;

}

Calendar();

}

function addMonth()

{

if ((month + 1 ) > 11 )

{

month = 0 ;

year = year + 1 ;

} else

{

month = month + 1 ;

}

Calendar();

}

function setDate()

{

if (document.all.month.value < 1 || document.all.month.value > 12 )

{

alert( " 月的有效范围在1-12之间! " );

return ;

}

year = Math.ceil(document.all.year.value);

month = Math.ceil(document.all.month.value - 1 );

Calendar();

}

</ Script >

< Script >

function buttonOver()

{

var obj = window.event.srcElement;

obj.runtimeStyle.cssText = " background-color:#FFFFFF " ;

// obj.className="Hover";

}

function buttonOut()

{

var obj = window.event.srcElement;

window.setTimeout( function () {obj.runtimeStyle.cssText = "" ;} , 300 );

}

</ Script >

< Style >

Input { font-family : verdana ; font-size : 9pt ; text-decoration : none ; background-color : #FFFFFF ; height : 20px ; border : 1px solid #666666 ; color : #000000 ; }

.Calendar { font-family : verdana ; text-decoration : none ; width : 170 ; background-color : #C0D0E8 ; font-size : 9pt ; border : 0px dotted #1C6FA5 ; }

.CalendarTD { font-family : verdana ; font-size : 7pt ; color : #000000 ; background-color : #f6f6f6 ; height : 20px ; width : 11% ; text-align : center ; }

.Title { font-family : verdana ; font-size : 11pt ; font-weight : normal ; height : 24px ; text-align : center ; color : #333333 ; text-decoration : none ; background-color : #A4B9D7 ; border-top-width : 1px ; border-right-width : 1px ; border-bottom-width : 1px ; border-left-width : 1px ; border-bottom-style : 1px ; border-top-color : #999999 ; border-right-color : #999999 ; border-bottom-color : #999999 ; border-left-color : #999999 ; }

.Day { font-family : verdana ; font-size : 7pt ; color : #243F65 ; background-color : #E5E9F2 ; height : 20px ; width : 11% ; text-align : center ; }

.DaySat { font-family : verdana ; font-size : 7pt ; color : #FF0000 ; text-decoration : none ; background-color : #E5E9F2 ; text-align : center ; height : 18px ; width : 12% ; }

.DaySun { font-family : verdana ; font-size : 7pt ; color : #FF0000 ; text-decoration : none ; background-color : #E5E9F2 ; text-align : center ; height : 18px ; width : 12% ; }

.DayNow { font-family : verdana ; font-size : 7pt ; font-weight : bold ; color : #000000 ; background-color : #FFFFFF ; height : 20px ; text-align : center ; }

.DayTitle { font-family : verdana ; font-size : 9pt ; color : #000000 ; background-color : #C0D0E8 ; height : 20px ; width : 11% ; text-align : center ; }

.DaySatTitle { font-family : verdana ; font-size : 9pt ; color : #FF0000 ; text-decoration : none ; background-color : #C0D0E8 ; text-align : center ; height : 20px ; width : 12% ; }

.DaySunTitle { font-family : verdana ; font-size : 9pt ; color : #FF0000 ; text-decoration : none ; background-color : #C0D0E8 ; text-align : center ; height : 20px ; width : 12% ; }

.DayButton { font-family : Webdings ; font-size : 9pt ; font-weight : bold ; color : #243F65 ; cursor : hand ; text-decoration : none ; }

</ Style >

< table border ="0" cellpadding ="0" cellspacing ="1" class ="Calendar" id ="caltable" >

< thead >

< tr align ="center" valign ="middle" >

< td colspan ="7" class ="Title" >

< a href ="javaScript:subMonth();" title ="上一月" Class ="DayButton" > 3 </ a > < input name ="year" type ="text" size ="4" maxlength ="4" onkeydown ="if (event.keyCode==13){setDate()}" onkeyup ="this.value=this.value.replace(/[^0-9]/g,'')" onpaste ="this.value=this.value.replace(/[^0-9]/g,'')" > 年 < input name ="month" type ="text" size ="1" maxlength ="2" onkeydown ="if (event.keyCode==13){setDate()}" onkeyup ="this.value=this.value.replace(/[^0-9]/g,'')" onpaste ="this.value=this.value.replace(/[^0-9]/g,'')" > 月 < a href ="JavaScript:addMonth();" title ="下一月" Class ="DayButton" > 4 </ a >

</ td >

</ tr >

< tr align ="center" valign ="middle" >

< Script LANGUAGE ="JavaScript" >

document.write( " <TD class=DaySunTitle id=diary > " + days[ 0 ] + " </TD> " );

for ( var intLoop = 1 ; intLoop < days.length - 1 ;intLoop ++ )

document.write( " <TD class=DayTitle id=diary> " + days[intLoop] + " </TD> " );

document.write( " <TD class=DaySatTitle id=diary> " + days[intLoop] + " </TD> " );

</ Script >

</ TR >

</ thead >

< TBODY border =1 cellspacing ="0" cellpadding ="0" ID ="calendar" ALIGN =CENTER ONCLICK ="getDiary()" >

< Script LANGUAGE ="JavaScript" >

for ( var intWeeks = 0 ; intWeeks < 6 ; intWeeks ++ )

{

document.write( " <TR style='cursor:hand'> " );

for ( var intDays = 0 ; intDays < days.length;intDays ++ ) document.write( " <TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD> " );

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

}

</ Script >

</ TBODY >

</ TABLE >

< Script LANGUAGE ="JavaScript" >

Calendar();

</ Script >

十三进入,退出页面的各种效果!

CODE:

进入页面<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:

       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 >
       <table width="96%" border="0" onMouseOver="borderize_on(event)" onMouseOut="borderize_off(event)" class="zuo22" onclick="javascript:clickfun('123')">
           <TR>
               <TD>把鼠标移过来</TD>
               <TD>把鼠标移过来</TD>
           </TR>
<TR>
               <TD>把鼠标移过来</TD>
               <TD>把鼠标移过来</TD>
           </TR>
<TR>
               <TD>把鼠标移过来</TD>
               <TD>把鼠标移过来</TD>
           </TR>
<TR>
               <TD>把鼠标移过来</TD>
               <TD>把鼠标移过来</TD>
           </TR>
       </table>

</body>
</html>

十五弹出提示的效果

CODE:

<body>
<script language=javascript>
var cao_x,cao_y;

function cao888()
{
this.display=display;
}

十六图片之间的切换

CODE:

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

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

十七 DIV_圆边圆角的实现

CODE:

<html xmlns:v>
<head>
<style>
v\:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>

十八跳动的菜单

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模仿as效果的导航菜单</title>
<style type="text/css">
<!--
a:link,a:visited { text-decoration: none; color: #666666 }
a:hover { text-decoration: underline }
#hor1 {
position:absolute;
left:320px;
top:20px;
width:220px;
height:20px;
z-index:1;
background-color: #999900;
}
#hor2 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:20px;
z-index:2;
background-color: #FFCC00;
}
#hor3 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:20px;
z-index:3;
background-color: #99CC00;
}
#board1 {
position:absolute;
left:320px;
top:40px;
width:220px;
height:120px;
z-index:-100;
background-color: #333333;
visibility: hidden;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
}
body {
background-color: #666666;
}
#board2 {
position:absolute;
left:320px;
top:60px;
width:220px;
height:120px;
z-index:-90;
background-color: #333333;
visibility: hidden;
}
#board3 {
position:absolute;
width:220px;
height:120px;
z-index:-80;
left: 320px;
top: 80px;
background-color: #333333;
visibility: hidden;
}
#hor4 {
position:absolute;
left:320px;
top:80px;
width:220px;
height:20px;
z-index:4;
background-color: #99CCCC;
}
#board4 {
position:absolute;
left:320px;
top:100px;
width:220px;
height:120px;
z-index:-70;
background-color: #333333;
visibility: hidden;
}

-->
</style>
<script type="text/javascript">
lastNo=0
function re(menu_no){
if(lastNo!=menu_no){
cur=menu_no+1
lastNo=menu_no
rest()
}else{
cur=100
}
document.getElementById("board"+menu_no).style.visibility="visible"
}
function rest(){
for(i=1;i<=4;i++){
document.getElementById("hor"+i).style.top=20*i;
document.getElementById("board"+i).style.visibility="hidden"
}
menu_num=4;
act=1
height=120+20
speed=0;
posY=0;
}
function huke(){
if(act==1&&cur<100){
speed=(height-posY)*0.69+speed*0.6
posY+=speed
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=posY+(i-2)*20
}
if(Math.abs(height-posY)<0.5){
for(i=cur;i<=menu_num;i++){
document.getElementById("hor"+i).style.top=height+(i-2)*20
}
act=0
}
setTimeout("huke()",50)
}
}

</script>
</head>
<body>
<div id="hor1" onclick="re(1);huke()">News</div>
<div id="hor2" onclick="re(2);huke()">Populor</div>
<div id="hor3" onclick="re(3);huke()">Sports</div>
<div id="hor4" onclick="re(4);huke()">Woman</div>
<div id="board1">1.由AS而想起Javascript<br />2.用Jscript写ASP有没有先天性的不足？<br />3.没有了。</div>
<div id="board2">1.xhtml+css真的来了吗？<br />2.Flash取代传统网站<br />3.Flash何时才能连接数据库？</div>
<div id="board3">1.程序员与小姐的10个相同。<br />2.中国的程序员与中国的足球？</div>
<div id="board4">1.二十一世纪最缺的是什么?人才<br />
<a href="[url]http://www.gamvan.com[/url]" target="_blank">[url]http://www.gamvan.com</a>[/url]
<a href="[url]http://www.gamvan.com[/url]" target="_blank">[url]http://www.gamvan.com</a></div>[/url]
</body>
</html>

十九通过页面抓取照片

CODE:

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

<HTML><HEAD><TITLE>te</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content=C# name=CODE_LANGUAGE>
<META content=JavaScript name=vs_defaultClientScript>
<META content=http://schemas.microsoft.com/intellisense/ie5
name=vs_targetSchema><LINK href="te.files/mycss.css" type=text/css
rel=stylesheet></HEAD>
<BODY background=te.files/qback1.gif>
<FORM id=Form1 name=Form1 action=te.aspx method=post>
<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="[url]http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar[/url]">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<TD style="HEIGHT: 222px" borderColor=#ffffff align=middle>
<OBJECT id=Form1_vd height=240 width=320
classid=CLSid:DF6D6569-5B0C-11D3-9396-008029E9B3A6 name=Form1_vd
VIEWASTEXT>
<PARAM NAME="_ExtentX" VALUE="8467">
<PARAM NAME="_ExtentY" VALUE="6350">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="CenterVideo" VALUE="-1">
<PARAM NAME="BackColor" VALUE="-2147483643">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="VideoBorder" VALUE="1">
<PARAM NAME="DriverIndex" VALUE="0">
<PARAM NAME="Preview" VALUE="-1">
<PARAM NAME="PreviewRate" VALUE="15">
<PARAM NAME="Overlay" VALUE="0">
<PARAM NAME="StretchPreview" VALUE="0">
<PARAM NAME="CancelKey" VALUE="0">
<PARAM NAME="CaptureRate" VALUE="66666">
<PARAM NAME="MakeUserConfirmCapture" VALUE="-1">
<PARAM NAME="PercentDropForError" VALUE="10">
<PARAM NAME="CaptureViaBackgroundThread" VALUE="0">
<PARAM NAME="IndexSize" VALUE="27000">
<PARAM NAME="CaptureAudio" VALUE="0">
<PARAM NAME="AbortLeftMouse" VALUE="-1">
<PARAM NAME="AbortRightMouse" VALUE="-1">
<PARAM NAME="TimeLimitEnabled" VALUE="0">
<PARAM NAME="TimeLimit" VALUE="30">
<PARAM NAME="StreamMaster" VALUE="0">
<PARAM NAME="YieldEventEnabled" VALUE="0">
<PARAM NAME="FrameEventEnabled" VALUE="0">
<PARAM NAME="VideoStreamEventEnabled" VALUE="0">
<PARAM NAME="WaveStreamEventEnabled" VALUE="0">
<PARAM NAME="UsePreciseCaptureControls" VALUE="0">
<embed src="8467" width="320" height="240" _extentx="8467" _extenty="6350" autosize="-1" centervideo="-1" backcolor="-2147483643" borderstyle="1" videoborder="1" driverindex="0" preview="-1" previewrate="15" overlay="0" stretchpreview="0" cancelkey="0" capturerate="66666" makeuserconfirmcapture="-1" percentdropforerror="10" captureviabackgroundthread="0" indexsize="27000" captureaudio="0" abortleftmouse="-1" abortrightmouse="-1" timelimitenabled="0" timelimit="30" streammaster="0" yieldeventenabled="0" frameeventenabled="0" videostreameventenabled="0" wavestreameventenabled="0" useprecisecapturecontrols="0">
</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>
<SCRIPT language=javascript>
function catchone()
{
    Form1.Form1_vd.SaveDIB("c:\\hosngcapture.dib");
    alert("图像存放在 c:\\hosngcapture.dib");
}

</SCRIPT>
</BODY></HTML>

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

</SCRIPT>
</BODY></HTML>

二十客户端静态页面玩分页

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
* {
   font-size:10.2pt;
   font-family:tahoma;
   line-height:150%;
}
.divContent
{
   border:1px solid red;
   background-color:#FFD2D3;
   width:500px;
   word-break:break-all;
   margin:10px 0px 10px;
   padding:10px;
}
</style>
</HEAD>

<BODY>
header
<div id="divPagenation"></div>
<div id="divContent"></div>
footer
<SCRIPT LANGUAGE="JavaScript">
<!--
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.divDisplayContent;
   this.contentStyle=null;
   this.strDisplayContent="";
   this.divDisplayPagenation;
   this.strDisplayPagenation="";

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

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

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

   DHTMLpagenation.initialize();
   return this;

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

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

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

   if(currentPage&¤tPage!=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&¤tPage!=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);'>";

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

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

//-->
</SCRIPT>
</BODY>
</HTML>

二十一类似与google个性页面的好东东(自由拖拽)

CODE:

<html>
<head>
<title>DRAG the DIV</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>
<script defer>
/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
var Drag={dragged:false,
    ao:null,
    tdiv: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.tdiv=document.createElement("div");
Drag.tdiv.innerHTML=Drag.ao.outerHTML;
Drag.ao.style.border="1px dashed red";
Drag.tdiv.style.display="block";
Drag.tdiv.style.position="absolute";
Drag.tdiv.style.filter="alpha(opacity=70)";
Drag.tdiv.style.cursor="move";
Drag.tdiv.style.border="1px solid #000000";
Drag.tdiv.style.width=Drag.ao.offsetWidth;
Drag.tdiv.style.height=Drag.ao.offsetHeight;
Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
document.body.appendChild(Drag.tdiv);
Drag.lastX=event.clientX;
Drag.lastY=event.clientY;
Drag.lastLeft=Drag.tdiv.style.left;
Drag.lastTop=Drag.tdiv.style.top;
},

draging:function(){//重要:判断MOUSE的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.tdiv.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.tdiv.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.tdiv.filters.alpha.opacity;
var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
var tt=parseInt(Drag.getInfo(Drag.tdiv).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.tdiv.removeNode(true);
                  Drag.ao=null;
                  return;
                }
            ab--;
            tl-=kl;
            tt-=kt;
            f-=kf;
            Drag.tdiv.style.left=parseInt(tl)+"px";
            Drag.tdiv.style.top=parseInt(tt)+"px";
            Drag.tdiv.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>
<table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
<tr >
<td width="25%" valgin="top">
    <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td><b>GMAIL</b></td>
        </tr>
        <tr>
          <td>暂时无法显示GMAIL内容</td>
        <tr>
    </table><table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>新浪体育</td>
        </tr>
        <tr>
          <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</td>
        <tr>
    </table>
    <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>焦点</td>
        </tr>
        <tr>
          <td>京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选
          解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 ?</td>
        <tr>
    </table>
</td>
<td width="25%">
    <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>中关村在线</td>
        </tr>
        <tr>
          <td>新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </td>
        <tr>
    </table></td>
<td width="25%">
    <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>网易商业</td>
        </tr>
        <tr>
          <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>
        <tr>
    </table>     <table border=0 class="dragTable" cellspacing="0">
        <tr>
          <td>黑可天下</td>
        </tr>
        <tr>
          <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>
        <tr>
    </table>
</td>
</tr>
</table>
<input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
</body>
</html>

二十二漂亮的表格

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tables</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* 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">
<caption> </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>

<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">lipeng</th>
<td>M9454LL/A</td>

<td>M9455LL/A</td>
<td>M9457LL/A</td>
</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>
<th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>

</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>

</table>

</body>
</html>

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

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

<body>
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
       <table width="180" border="1" cellpadding="0" cellspacing="0">
               <tr>
                       <td class="caption">SeekAssist</td>
                       <td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
                       <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
               </tr>
               <tr id="assistwin">
                       <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
               </tr>
</table>
    <br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
       <table width="180" border="1" cellpadding="0" cellspacing="0">
               <tr>
                       <td class="caption">SeekRank</td>
                       <td width="14" align="center"><a href="#" onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
                       <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
               </tr>
               <tr id="rankwin">
                       <td height="100" colspan="3" bordercolor="#eeeeee"> </td>
               </tr>
</table>
       <br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')">
       <table width="180" border="1" cellpadding="0" cellspacing="0">
               <tr>
                       <td class="caption">MyColor</td>
                       <td width="14" align="center"><a href="#" onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
                       <td width="14" align="center"><a href="#" onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
               </tr>
               <tr id="mycolorwin">
                       <td height="100" colspan="3" bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
                               </tr>
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
                               </tr>
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
                               </tr>
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
                               </tr>
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
                               </tr>
                               <tr>
                                       <td align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
                               </tr>
                       </table></td>
               </tr>
</table>
       <br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')">
       <table width="570" border="1" cellpadding="0" cellspacing="0">
               <tr>
                       <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                       <tr>
                                               <td class="caption">Results</td>
                                               <td width="12" class="button"><a href="#" onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
                                               <td width="12" class="button"><a href="#" onClick="MM_showHideLayers('results','','inherit')">X</a></td>
                                       </tr>
                       </table></td>
               </tr>
               <tr>
                       <td height="20" bordercolor="#eeeeee"><input name="url" type="text" value="[url]http://www.google.com/search?q=ezlee[/url]" size="100">
                       <a href="#" onclick="mainframe.location=url.value">Search</a></td>
               </tr>
               <tr id="resultswin">
                       <td height="318" valign="top" class="navframe"><aiframe name="mainframe" id="mainframe" src="[url]http://www.google.com/search?q=ezlee[/url]" width="100%" height="100%" frameborder="0" scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
               </tr>
               <tr>
                       <td height="14" class="statusbar">Ready!</td>
            </tr>
</table>
       <br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>

运行代码的代码：

CODE:

}
</script>

二十五凹陷文字

CODE:

<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="[url]http://www.lenvo.cn/[/url]">[url]www.cawen.com</a></font>[/url]
</div>

二十六漂亮的仿flash菜单

CODE:

这是把事件动作绑定到菜单上的函数
*/
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="[url]http://www.lenvo.cn/[/url]">[url]www.lenvo.cn</a></td>[/url]
    <td>Name</td>
    <td>Is</td>
    <td>LeX</td>
    <td>Rus</td>
    <td>!!!</td>
</tr>
</table>

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en">

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

       <div id="header">
           <h1>Browser-width defined font size</h1>
       </div>

<div id="content">
           <div id="rightContent">
               <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>
           </div>

           <div id="leftContent">
               <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>
                   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>
           </div>

           <div class="clearer">
           </div>
       </div>

       <div id="footer">
           <a href="[url]http://www.themaninblue.com/writing/perspective/2003/12/22/[/url]">Back to the explanation</a>
       </div>
   </div>

</body>
</html>

二十八超级REAL视频播放器

CODE:

width="339" height="227">
<param name="_ExtentX" value="9869">
<param name="_ExtentY" value="7726">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="[url]http://entdown.163.com/ent/garbage/mv/1028/xuemv.rm[/url]">
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
<br>

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

CODE:

<form action="[url]http://www.jluvip.com/index.html[/url]" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
Ctrl+Enter提交内容信息
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>

三十 accesskey 提交

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

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

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新闻切换技术</title>
<style type="text/css">
<!--
body { text-align: center; margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,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([img]http://tech.163.com/newimg/adpic.gif[/img]);}
.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([img]http://tech.163.com/newimg/num1.gif[/img]);}
.focusPic .more .textNum .bg2{ background:url([img]http://tech.163.com/newimg/num2.gif[/img]);}
.focusPic .more .textNum .bg3{ background:url([img]http://tech.163.com/newimg/num3.gif[/img]);}
.focusPic .more .textNum .bg4{ background:url([img]http://tech.163.com/newimg/num4.gif[/img]);}
.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>
<script language="JavaScript" type="text/javascript">
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>
<div class="focusPic">
<div id="focusPic1" style="display:block ;">
<div class="pic"> <a href="[url]http://tech.163.com/special/000915SN/soft2005.html[/url]"><img src="[img]http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg[/img]" alt="网易学院05年软件评选结果" width="240" height="180" border="0" /></a> </div>
<h2><a href="[url]http://tech.163.com/special/000915SN/soft2005.html[/url]">网易学院05年软件评选结果</a></h2>
<p>经过大家的热情投票和我们的辛劳整理，网易学院2005年年度软件评选结果终于出炉啦。点击进入查看……<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="[url]http://tech.163.com/special/000915SN/soft2005.html[/url]" class="cDRed">详细</a></p>
</div>
<div id="focusPic2" style="display: none ;">
<div class="pic"> <a href="[url]http://tech.163.com/discover/[/url]"><img src="[img]http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg[/img]" alt="颠覆丛林动物生存法则" width="240" height="180" border="0" /></a> </div>
<h2><a href="[url]http://tech.163.com/discover/[/url]">颠覆丛林动物生存法则</a></h2>
<p>群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="[url]http://tech.163.com/discover/[/url]" class="cDRed">详细</a></p>
</div>
<div id="focusPic3" style="display: none ;">
<div class="pic"> <a href="[url]http://tech.163.com/special/00091MNJ/itobserve015.html[/url]"><img src="[img]http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg[/img]" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" /></a> </div>
<h2><a href="[url]http://tech.163.com/special/00091MNJ/itobserve015.html[/url]">WAPI并非贸易阴谋</a></h2>
<p>近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="[url]http://tech.163.com/special/00091MNJ/itobserve015.html[/url]" class="cDRed">详细</a></p>
</div>
<div id="focusPic4" style="display: none ;">
<div class="pic"> <a href="[url]http://tech.163.com/special/00091OSI/horizons.html[/url]"><img src="[img]http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg[/img]" alt="新视野号探测冥王星特别专题" width="240" height="180" border="0" /></a> </div>
<h2><a href="[url]http://tech.163.com/special/00091OSI/horizons.html[/url]">新视野号探测冥王星特别专题</a></h2>
<p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="[url]http://tech.163.com/special/00091OSI/horizons.html[/url]" class="cDRed">详细</a></p>
</div>
<div class="more">
<div class="textNum">
<div class="text">> 更多头图新闻</div>
<div class="num bg1" id="focusPic1nav" style="display: block;">
<ul>
<li>1</li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg2" id="focusPic2nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li>2</li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg3" id="focusPic3nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li>3</li>
<li><a href="javascript:setFocus1(4);" target="_self">4</a></li>
</ul>
</div>
<div class="num bg4" id="focusPic4nav" style="display: none;">
<ul>
<li><a href="javascript:setFocus1(1);" target="_self">1</a></li>
<li><a href="javascript:setFocus1(2);" target="_self">2</a></li>
<li><a href="javascript:setFocus1(3);" target="_self">3</a></li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

三十二菜单特效

CODE:

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

<HTML><HEAD><TITLE>New Page 28</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2800.1491" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<STYLE>#ssm2 A {
FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none
}
#ssm2 A:hover {
COLOR: #ccff33
}
body{background:url([img]http://www.infowe.com/images/infowe.gif[/img]) no-repeat right center fixed;}
</STYLE>
</HEAD>
<BODY>
<SCRIPT language=JavaScript1.2>

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

function highlight(x){

document.forms[x].elements[0].focus()

document.forms[x].elements[0].select()

}

function MM_jumpMenu(targ,selObj,restore){

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

var NS

IE=document.all;

NS=document.layers;

hdrFontFamily="Verdana";

hdrFontSize="2";

hdrFontColor="white";

hdrBGColor="#CCCCCC";

linkFontFamily="Verdana";

linkFontSize="2";

linkBGColor="white";

linkOverBGColor="#CCCCCC";

linkTarget="_top";

YOffset=60;

staticYOffset=20;

menuBGColor="#CCCCCC";

menuIsStatic="no";

menuHeader="Main Index"

menuWidth=150; // Must be a multiple of 5!

staticMode="advanced"

barBGColor="#C0C0C0";

barFontFamily="Verdana";

barFontSize="2";

barFontColor="white";

barText="MENU";

function moveOut() {

if (window.cancel) {

cancel="";

}

if (window.moving2) {

clearTimeout(moving2);

moving2="";

}

if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {

if (IE) {ssm2.style.pixelLeft += (5%menuWidth);

}

if (NS) {

document.ssm2.left += (5%menuWidth);

}

moving1 = setTimeout('moveOut()', 5)

}

else {

clearTimeout(moving1)

}

};

function moveBack() {

cancel = moveBack1()

}

function moveBack1() {

if (window.moving1) {

clearTimeout(moving1)

}

if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {

if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);

}

if (NS) {

document.ssm2.left -= (5%menuWidth);

}

moving2 = setTimeout('moveBack1()', 5)}

else {

clearTimeout(moving2)

}

};

lastY = 0;

function makeStatic(mode) {

if (IE) {winY = document.body.scrollTop;var NM=ssm2.style

}

if (NS) {winY = window.pageYOffset;var NM=document.ssm2

}

if (mode=="smooth") {

if ((IE||NS) && winY!=lastY) {

smooth = .2 * (winY - lastY);

if(smooth > 0) smooth = Math.ceil(smooth);

else smooth = Math.floor(smooth);

if (IE) NM.pixelTop+=smooth;

if (NS) NM.top+=smooth;

lastY = lastY+smooth;

}

setTimeout('makeStatic("smooth")', 1)

}

else if (mode=="advanced") {

if ((IE||NS) && winY>YOffset-staticYOffset) {

if (IE) {NM.pixelTop=winY+staticYOffset

}

if (NS) {NM.top=winY+staticYOffset

}

else {

if (IE) {NM.pixelTop=YOffset

}

if (NS) {NM.top=YOffset-7

}

setTimeout('makeStatic("advanced")', 1)

}

function init() {

if (IE) {

ssm2.style.pixelLeft = -menuWidth;

ssm2.style.visibility = "visible"

}

else if (NS) {

document.ssm2.left = -menuWidth;

document.ssm2.visibility = "show"

}

else {

alert('Choose either the "smooth" or "advanced" static modes!')

}

function MM_displayStatusMsg(msgStr) {

status=msgStr;

document.MM_returnValue = true;

}

</SCRIPT>

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('偶和叶子', '[url]http://vip.aou.cn/csqf/about.htm[/url]', '');

addItem('聆听心海', '[url]http://vip.aou.cn/csqf/linting.htm[/url]', '');

addItem('风言风语', '[url]http://vip.aou.cn/csqf/fyfy.htm[/url]', '');

addItem('风行风影', '[url]http://vip.aou.cn/csqf/fxfy.htm[/url]', '');

addItem('雁过留声', '[url]http://csqf.etp21.com/[/url]', '_blank');

addHdr('WELCOME TO');

addItem('经广俱乐部', '[url]http://dj973.tz315.net[/url]', '_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>
<p style="height:1000px;"></p>
</BODY></HTML>

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

CODE:

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>
<style type="text/css">
<!--
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>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</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="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>

</ul>
</body>
</html>

三十四一个菜单

CODE:

<body>
<ul class="gallery"> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li> <li style="background-image:url(images/temp02.jpg)"><a href="#">SONY液晶狂降1000元</a></li></ul>
</body>
</html>

三十五滚屏显示

CODE:

将下面的代码插入到<body> </body>之间。
<script language"javascript">
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",10);
}
function sc(){
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
document.onmousedown=sc
document.ondblclick=initialize
</script>

滚动的按钮

三十六制作特殊字的脚本

CODE:

<html>
<head>
<title>特殊文字的制作</title>

<body text=#00ff00 bgColor=black onload=e(d.q)>
<CENTER><script language="JavaScript" src="../news2.js"></script></CENTER>
<center>特殊文字的制作</font></center>
<br>
<center>
<table border=2 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为效果显示</strong></font></td></tr>
<tr><td align=left>
<SCRIPT>d=document;wr='write';v=void 0;u='';sn='<span style="background-color:#00ff00;color:black;">';sa='</span>';function di(x,y){for(i=1;i<x;i++)d[wr](y);}d.layers?n4=1:n4=0;d.all?i4=1:i4=0;i4&&navigator.platform.indexOf('Mac')!=-1?i4=0:v;fn='font-family:Courier;font-size:12px;';!n4?vb='.g{background-color:black;border-color:green;border-style:solid;border-width:1px;color:#00ff00;'+fn+'}.h{background-color:#00FF00;border:none;color:black;'+fn+'}':vb=u;di(2,'<style>'+vb+'body{'+fn+'}<\/style>');el='elements';vl='value';ih='innerHTML';sp='　';br='<br>';a1='15';a2='1234';a3='12345';a4='234';a5='2345';a6='1';a7='3';a8='5';a9='135';b0='24';b1='23';b2='2';b3='14';b4='123';b5='4';b6='34';b7='235';f=new Array();f['A']=[a4,a1,a1,a3,a1,a1,a1];f['B']=[a2,a1,a1,a2,a1,a1,a2];f['C']=[a5,a6,a6,a6,a6,a6,a5];f['D']=[a2,a1,a1,a1,a1,a1,a2];f['E']=[a3,a6,a6,a2,a6,a6,a3];f['F']=[a3,a6,a6,a2,a6,a6,a6];f['G']=[a5,a6,a6,'1345',a1,a1,a5];f['H']=[a1,a1,a1,a3,a1,a1,a1];f['I']=[a3,a7,a7,a7,a7,a7,a3];f['J']=[a5,a8,a8,a8,a1,a1,a4];f['K']=[a1,b3,'13','12','13',b3,a1];f['L']=[a6,a6,a6,a6,a6,a6,a3];f['M']=[a1,'1245',a9,a1,a1,a1,a1];f['N']=[a1,a1,'125',a9,'145',a1,a1];f['O']=[a4,a1,a1,a1,a1,a1,a4];f['P']=[a2,a1,a1,a2,a6,a6,a6];f['Q']=[a4,a1,a1,a1,a9,b3,b7];f['R']=[a2,a1,a1,a2,'13',b3,a1];f['S']=[a5,a6,a6,a4,a8,a8,a2];f['T']=[a3,a7,a7,a7,a7,a7,a7];f['U']=[a1,a1,a1,a1,a1,a1,a4];f['V']=[a1,a1,a1,a1,a1,b0,a7];f['W']=[a1,a1,a9,a9,a9,a9,b0];f['X']=[a1,a1,b0,a7,b0,a1,a1];f['Y']=[a1,a1,b0,a7,a7,a7,a7];f['Z']=[a3,a8,b5,a7,b2,a6,a3];f['a']=[u,u,a4,a8,a5,a1,a5];f['b']=[a6,a6,a2,a1,a1,a1,a2];f['c']=[u,u,a5,a6,a6,a6,a5];f['d']=[a8,a8,a5,a1,a1,a1,a5];f['e']=[u,u,a4,a1,a3,a6,a5];f['f']=['345',b2,a3,b2,b2,b2,b2];f['g']=[u,u,a5,a1,a5,a8,a4];f['h']=[a6,a6,a2,a1,a1,a1,a1];f['i']=[a7,u,b4,a7,a7,a7,a3];f['j']=[a8,u,a8,a8,a8,a1,a4];f['k']=[a6,a6,a1,b3,b4,b3,a1];f['l']=[b4,a7,a7,a7,a7,a7,a3];f['m']=[u,u,b0,a9,a9,a9,a9];f['n']=[u,u,a4,a1,a1,a1,a1];f['o']=[u,u,a4,a1,a1,a1,a4];f['p']=[u,u,a2,a1,a2,a6,a6];f['q']=[u,u,a5,a1,a5,a8,a8];f['r']=[u,u,a4,a1,a6,a6,a6];f['s']=[u,u,a5,a6,a4,a8,a2];f['t']=[u,b2,a3,b2,b2,b2,'345'];f['u']=[u,u,a1,a1,a1,a1,a4];f['v']=[u,u,a1,a1,a1,b0,a7];f['w']=[u,u,a9,a9,a9,a9,b0];f['x']=[u,u,a1,b0,a7,b0,a1];f['y']=[u,u,a1,a1,a5,a8,a4];f['z']=[u,u,a3,b5,a7,b2,a3];f['1']=[b4,a7,a7,a7,a7,a7,a3];f['2']=[a2,a8,a8,a4,a6,a6,a3];f['3']=[a2,a8,a8,a4,a8,a8,a2];f['4']=[b6,b0,b3,b3,a3,b5,b5];f['5']=[a3,a6,a6,a2,a8,a8,a2];f['6']=[a5,a6,a6,a2,a1,a1,a4];f['7']=[a3,a8,a8,b5,a7,a7,a7];f['8']=[a4,a1,a1,a4,a1,a1,a4];f['9']=[a4,a1,a1,a5,a8,a8,a2];f['0']=f['O'];f['`']=[a6,b2,a7,u,u,u,u];f['~']=[b7,b3,u,u,u,u,u];f['!']=[a7,a7,a7,a7,a7,u,a7];f['@']=[a2,a8,b7,a9,a9,a9,a4];f['#']=[b0,a3,b0,a3,b0,u,u];f['$']=[a7,a5,a6,a4,a8,a2,a7];f['%']=['25',a9,b0,a7,b0,a9,b3];f['^']=[a7,b0,a1,u,u,u,u];f['&']=[a4,a6,a6,'25',a9,b3,b7];f['*']=[a7,a9,a4,a9,a7,u,u];f['(']=[b6,b2,b2,b2,b2,b2,b6];f[')']=[b6,a8,a8,a8,a8,a8,b6];f[']']=[b1,b5,b5,b5,b5,b5,b1];f['-']=[u,u,u,a3,u,u,u];f['=']=[u,u,a3,u,a3,u,u];f['+']=[u,a7,a7,a3,a7,a7,u];f['[']=[a4,b2,b2,b2,b2,b2,a4];f[']']=[a4,b5,b5,b5,b5,b5,a4];f['{']=[b6,b2,b2,a6,b2,b2,b6];f['}']=[b1,b5,b5,a8,b5,b5,b1];f['|']=[a7,a7,a7,a7,a7,a7,a7];f['\\']=[a6,a6,b2,a7,b5,a8,a8];f['/']=[a8,a8,b5,a7,b2,a6,a6];f['<']=[u,b5,a7,b2,a7,b5,u];f['>']=[u,b2,a7,b5,a7,b2,u];f['?']=[a4,a1,b5,a7,a7,u,a7];f['.']=[u,u,u,u,u,u,a7];f[':']=[u,u,a7,u,u,u,a7];f[';']=[u,u,a7,u,u,a7,b5];f[',']=[u,u,u,u,u,a7,b5];f['\'']=[a7,a7,a7,u,u,u,u];f['"']=[b0,b0,b0,u,u,u,u];f['_']=[u,u,u,u,u,u,a3];f['id']=[u,u,u,u,a6,b0,a7,u];f[' ']=[u,u,u,u,u,u,u];if(n4)window.onResize=rI;function rI(){window.history.go(0);}function w(y,z){sp=z.charCodeAt(0)<256?" ":"　";y=y.split('');for(i in y)!f[y[i]]?y[i]='id':v;s=u;for(i=0;i<7;i++){for(k in y){for(j=1;j<6;j++){y[k]=='id'?i==2?j==5?s+=sn+"O"+sa:s+=sp:i==3?j==2?s+=sn+"I"+sa:j==4?s+=sn+"E"+sa:s+=sp:i==4?j==3?s+=sn+"D"+sa:s+=sp:s+=sp:f[y[k]][i].indexOf(j)!=-1?s+=z:s+=sp;}s+=sp;}s+=br;}return s;}function e(v){n4?l=d.layers['p']:i4?l=d.all['p']:l=d.getElementById('p');r=v[el][1][vl].split(u);t=d.q1[el][0];z=r[0];y=v[el][0][vl];!n4?i4?l[ih]=br+w(y,z):l[ih]=w(y,z):l.document[wr]('<span style="font-family:Courier;font-size:12px;">'+w(y,z));n4?l.document.close():v;t[vl]="<div style='font-family:Courier'>"+w(y,z)+"</div>";}</SCRIPT>

<SCRIPT>di(2,'IDEO ASCII TYPESETTER');di(56,sp);di(2,'：）'+br);di(81,'-');</SCRIPT>

<FORM name=q><BR><BR>1. 请输入字母: <INPUT class=g value=chenxi><BR><BR>2. 请选择一种字符: <INPUT class=g size=5 value=■><BR><BR>3.
Generate ASCII:
<INPUT class=h onclick=e(d.q) type=button value=Run><BR><BR><BR>
<SCRIPT>di(81,'-');di(2,br+'copy & paste:');di(38,sp);</SCRIPT><BR><BR><BR>
<DIV id=p style="WIDTH: auto; POSITION: absolute; HEIGHT: auto"></DIV>
<SCRIPT>di(11,br);di(81,'-');</SCRIPT>
<BR>copy & paste into html:<BR><BR><BR></FORM>
<FORM name=q1><TEXTAREA rows=3 cols=67></TEXTAREA><BR><BR></FORM>

</td></tr>
</table></center>
<br>
<br><br>
<br><br>
<br><br>
<br>

三十七美化列表

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - [url]http://www.never-online.net[/url] </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
   font-family: verdana;
   font-size: 9pt;
}
h1
{
   font-family: tahoma;
   font-size: 22pt;
   text-align: left;
}
pre
{
   font-size: 9pt;
   font-family: verdana;
   border: 1px solid #006600;
   width: 400px;
   padding: 10px;
   background: #ffffff;
   color: #006600;
}
.CtlSelect
{
   border: 1px solid #006600;
   font-family: verdana;
   height: 20px;
   color: #006600;
   background: #ffffff;
   /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
   background: #006600;
   color: #ffffff;
   height: 20px;
}
.unselected
{
   height: 20px;
   color: #006600;
   line-height: 120%;
   border-bottom: 1px solid #006600;
}
.CtlSelect1
{
   border: 1px solid #003399;
   font-family: verdana;
   height: 20px;
   color: #003399;
   background: #ffffff;
   /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
   background: #003399;
   color: #ffffff;
   height: 20px;
}
.unselected1
{
   height: 20px;
   color: #003399;
   line-height: 120%;
   border-bottom: 1px solid #003399;
}
.CtlSelect2
{
   border: 1px solid #990000;
   font-family: verdana;
   height: 20px;
   color: #990000;
   background: #ffffff;
   /*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
   background: #990000;
   color: #ffffff;
   height: 20px;
}
.unselected2
{
   height: 20px;
   color: #990000;
   line-height: 120%;
   border-bottom: 1px solid #990000;
}
.copyright
{
   margin-top: 10px;
   font-size: 9pt;
   text-align: center;
   color: #333;
   font-weight: bold;
}
</style>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-------------------------------------------------------------
// @ Module: simulate select control, IE only.
// @ Debug in: IE 6.0
// @ Script by: blueDestiny, never-online
// @ Updated: 2006-3-22
// @ Version: 1.0 apha
// @ Email: blueDestiny [at] 126.com
// @ Website: [url]http://www.never-online.net[/url]
// @ Please Hold this item please.
//
// API
// @ class: simulateSelect()
//
// @ object.style(ctlStyle[,selStyle][,unselStyle])
//   ctlStyle: main control combox css class name
//   selStyle: when mouseover or option focus css class name
//   unselStyle: options blur's css class name
//
// @ object.width=(widthPX)
//   widthPX must be a digit number.
//
// @ object.height=(heightPX)
//   heightPX must be a digit number.
//
// @ object.getValue(ctlSelID)
//   ctlSelID is the unique select control ID
//
// -------------- for the next Version ----------
// @ object.readOnly = (blnReadOnly)
//   blnReadOnly must be a boolean type or a number type.
// @ object.addEvent(w, h)
//   w: fire handler's event.
//   h: handler function.
//-------------------------------------------------------------

function $(objID)
{
   return document.getElementById(objID);
};
function Offset(e)
{
   var t = e.offsetTop;
   var l = e.offsetLeft;
   var w = e.offsetWidth;
   var h = e.offsetHeight-2;

   while(e=e.offsetParent)
   {
       t+=e.offsetTop;
       l+=e.offsetLeft;
   }
   return {
       top : t,
       left : l,
       width : w,
       height : h
   }
}
//-----------------------------------------------
function simulateSelect() { with(this)
{
   this.IDs = [];
   this.name = this;
   // property for beta Version
   // can editable combox
   this.readonly = true;
   this.height = 20;
   this.width = null;
   this.ctlStyle = "CtlSelect";
   this.selStyle = "selected";
   this.unselStyle = "unselected";
   this.elementPrefix = "e__";
   this.inputPrefix = "i__";
   this.containerPrefix = "c__";
   this.buttonPrefix = "b__";
   return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
   eval(name).append(ctlSelIDs);
   eval(name).simulates();
}};

simulateSelect.prototype.style = function() { with(this)
{
   ctlStyle = arguments[0];
   selStyle = arguments[1];
   unselStyle = arguments[2];

}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
   if( ctlSelIDs.indexOf(",")>0 )
   {
       var arrCtlSel = ctlSelIDs.split(",");
       for(var i=0; i<arrCtlSel.length; i++)
       {
           eval(name).IDs.push(arrCtlSel[i]);
       }
   }
   else
   {
       eval(name).IDs.push(ctlSelIDs);
   }
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
   // here compatible mf.
   var el = e ? e.srcElement : e.target;
   if( el.id.indexOf(elementPrefix)>-1 ||
   el.id.indexOf(inputPrefix)>-1 ||
   el.id.indexOf(containerPrefix)>-1 ||
   el.id.indexOf(buttonPrefix)>-1 )
   {
       return;
   }
   else
   {
       for(var i=0; i<eval(name).IDs.length; i++)
       if( $(containerPrefix + IDs[i]) )
       $(containerPrefix + eval(name).IDs[i]).style.display = "none";
   }

}};
simulateSelect.prototype.simulates = function() { with(this)
{
   for(var i=0; i<IDs.length; i++)
   eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
   var input;
   var button;
   var object;
   var offset;

   object = $(ctlSelID);
   offset = Offset(object);
   input = document.createElement("INPUT");
   button = document.createElement("BUTTON");
   button.setAttribute("id", buttonPrefix + ctlSelID);
   //button.value = "⊿";
   button.value = "6";
   button.style.fontFamily = "Webdings, Marlett";
   button.style.background = "";
   button.onclick = input.onclick = function()
   {
       this.blur();
       eval(name).expand(ctlSelID, offset);
   }
   input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
   input.setAttribute("id", inputPrefix + ctlSelID);
   input.title = button.title = "click expand options";
   input.style.cursor = button.style.cursor = "default";
   input.className = button.className = ctlStyle;
   input.style.width = (width>0 ? width : object.offsetWidth);
   height ? input.style.height=button.style.height=height : "";
   input.value = object[0].text;
   if( readonly==true ) input.readOnly=true;

   // this method is only IE.
   object.insertAdjacentElement("afterEnd",button);
   object.insertAdjacentElement("afterEnd",input);
   object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
   var div, btn_off;
   var object = $(ctlSelID);

   if( !$(containerPrefix + ctlSelID) )
   {
       div = document.createElement("DIV");
       div.style.position = "absolute";
       div.style.display = "block";
       div.setAttribute("id", containerPrefix + ctlSelID);
       div.className = ctlStyle;
       div.style.left = offset.left;
       div.style.top = offset.top + offset.height;
       div.style.width = (width ? width : offset.width) + 20;
       div.style.height = offset.height;
       document.body.appendChild(div);

       for(var i=0; i<object.length; i++)
       {
           div = document.createElement("DIV");
           div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
           div.style.cursor = "default";

           if( object[i].text==$(inputPrefix + ctlSelID).value )
           div.className = selStyle;
           else
           div.className = unselStyle;

           div.innerText = div.title = object[i].text;
           div.style.height = height;
           div.setAttribute("value", object[i].value);

           div.onmouseover = function()
           {
               for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
               {
                   if($(containerPrefix + ctlSelID).childNodes[j]==this)
                   $(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
                   else
                   $(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
               }
           };
           div.onclick = function()
           {
               $(inputPrefix + ctlSelID).value = this.innerText;
               $(containerPrefix + ctlSelID).style.display = "none";
           };
           $(containerPrefix + ctlSelID).appendChild(div);
       }
       return;
   }

   if( $(containerPrefix + ctlSelID).style.display=="none" )
   {
       for(var i=0; i<object.length; i++)
       {
           if( object[i].text==$(inputPrefix + ctlSelID).value )
           $(elementPrefix + ctlSelID + i).className = selStyle;
           else
           $(elementPrefix + ctlSelID + i).className = unselStyle;
       }
       $(containerPrefix + ctlSelID).style.display="block";
       return;
   }

   if( $(containerPrefix + ctlSelID).style.display=="block" )
   {
       $(containerPrefix + ctlSelID).style.display="none";
       return;
   }
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
   if( $(inputPrefix + ctlSelID) )
   return $(inputPrefix + ctlSelID).value;
   else
   return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
// IE only.
document.attachEvent("onmousedown", function() {
                       a.checkupOnMouseDown(event);
                       b.checkupOnMouseDown(event);
                       c.checkupOnMouseDown(event)
                       }
                   );
//-->
</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>

<p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>

<p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>

<p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p>

<p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>

<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>

<h4> description </h4>
<pre>
//-------------------------------------------------------------
// @ Module: simulate select control, IE only.
// @ Debug in: IE 6.0
// @ Script by: blueDestiny, never-online
// @ Updated: 2006-3-22
// @ Version: 1.0 apha
// @ Email: blueDestiny [at] 126.com
// @ Website: [url]http://www.never-online.net[/url]
// @ Please Hold this item please.
//
// API
// @ simulateSelect(ctlSelIDs)
//   ctlSelIDs: select control IDs, split by ","
//
// @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
//   ctlStyle: main control combox css class name
//   selStyle: when mouseover or option focus css class name
//   unselStyle: options blur's css class name
//
// @ simulateSelect.width=(widthPX)
//   widthPX must be a digit number.
//
// @ simulateSelect.height=(heightPX)
//   heightPX must be a digit number.
//
// -------------- for the next Version ----------
// @ simulateSelect.readOnly = (blnReadOnly)
//   blnReadOnly must be a boolean type or a number type.
// @ simulateSelect.addEvent(w, h)
//   w: fire handler's event.
//   h: handler function.
//-------------------------------------------------------------
</pre>

<div class="copyright">
Power By blueDestiny, never-online
[url]http://www.never-online.net[/url]
</div>
</BODY>
</HTML>

三十八 CSS模仿IE警告信息栏

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<title>51du.cn-代码演示专用页面</title>
<style type="text/css">
body {
margin: 0 !important;
padding: 0 !important;
}

/* A fake IE information bar */
#infobar {
font: message-box;
}

/* Please adjust the values if the infobar is not looking good */
#infobar a, #infobar a:link, #infobar a:visited, #infobar a:active {
    display: block;
    float: left;
    clear: both;
    width: 100%;
    color: InfoText;
    background: InfoBackground url([img]http://www.51du.cn/img/warning.gif[/img]) no-repeat fixed .3em .3em;
    padding: .45em .3em .45em 2em;
    border-bottom: .16em outset;
    text-decoration: none;
    cursor: default;
}

#infobar a:hover {
color: HighlightText;
background: Highlight url([img]http://www.51du.cn/img/warning2.gif[/img]) no-repeat fixed .3em .3em;
}

/* A fake viewplot for IE information bar */
#viewplot {
    width: 100%;
    height: expression(this.parentNode.offsetHeight - this.offsetTop);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 1em;   /* Please set this to the value as that of your <body> */
}
</style>
</head>
<body>
<div id="infobar" align=center><a rel="nofollow" href="[url]http://www.51du.cn/[/url]">欢迎访问独来读网的BLOG</a></div>
</body>
</html>

三十九文字幻灯片

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<title>51du.cn-代码演示专用页面</title>
<style type="text/css">
.trans {filter:revealTrans(Transition=12,Duration=2)}
</style>
</head>
<body>
<script language="JavaScript">
Text = new Array(
   "<a href='[url]http://www.51du.cn[/url]' target='_blank' class='cr4'>班级留言“说”出口，校友录开通语音留言服务</a>",
   "<a href='[url]http://www.51du.cn[/url]' class='cr4'>星级会员新体验,享受无广告的清新校友录</a>",
   "<a href='[url]http://www.51du.cn[/url]' target='_blank' class='cr4'>星级会员免费多彩留言,表情,贴图,个性无限...</a>",
   "<a href='[url]http://www.51du.cn[/url]' target='_blank' class='cr4'>星级会员免费留言下载,导出更多昔日记忆</a>",
   "<a href='[url]http://www.51du.cn[/url]' target='_blank' class='cr4'>在5千万用户中脱颖而出,我是星级会员</a>"
)
var IDX= -1;
function playAd() {
   if (IDX==Text.length-1) {
       IDX=0;
   } else {
       IDX++;
   }
   var prefix = "";
   divText.filters[0].apply();
   divText.innerHTML = prefix + Text[IDX];
   divText.filters[0].play();
   to = setTimeout("playAd()",6000);
}
</script>
<table width=453 border=0 cellspacing=3 cellpadding=0>
      <tr bgcolor=CCF4B9>
        <td height=24 bgcolor=CCF4B9 id=divText class=trans></td>
      </tr>
    <script>playAd()</script>
</table>
</body>
</html>

四十一个非常不错的loading 效果

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;

function startLongProcess()
{
divProgressDialog.style.display = "";
resizeModal();
btnCancel.focus();

// Add a resize handler for the window
window.onresize = resizeModal;

// Add a warning in case anyone tries to navigate away or refresh the page
window.onbeforeunload = showWarning;

//
// Here's where you would normally kick off a long asynchronous process
// like a file download or a remote database operation. Here, we use
// our "long process" to simulate this process.
//

continueLongProcess();
}

function updateProgress(nNewPercent)
{
// Update our pseudo progress bar
divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
* nNewPercent / 100)+ "px";
}

function stopLongProcess()
{
if (g_oTimer != null)
{
    // Clear the timer so we don't get called back an extra time
    window.clearTimeout(g_oTimer);
    g_oTimer = null;
}

// Hide the fake modal DIV
divModal.style.width = "0px";
divModal.style.height = "0px";
divProgressDialog.style.display = "none";

// Remove our event handlers
window.onresize = null;
window.onbeforeunload = null;

nRepetitions = 0;
}

function continueLongProcess()
{
if (nRepetitions < NUMBER_OF_REPETITIONS)
{
    // Set the timeout somewhere between 0 and .25 seconds
    var nTimeoutLength = Math.random() * 250;
    updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);

    g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
    nRepetitions++;
}
else
{
    stopLongProcess();
}
}

function showWarning()
{
//Warn users before they refresh the page or navigate away
return "Navigating to a different page or refreshing the window could cause you to lose precious data.\n\nAre you*absolutely* certain you want to do this?";
}

function resizeModal()
{
// Resize the DIV which fakes the modality of the dialog DIV
divModal.style.width = document.body.scrollWidth;
divModal.style.height = document.body.scrollHeight;

// Re-center the dialog DIV
divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}

</SCRIPT>

<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
<DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
    Downloading Requested Document
</DIV>
<DIV STYLE="PADDING: 5px">
    Please wait while I download the document you requested.
</DIV>
<DIV STYLE="PADDING: 5px">
    This may take several seconds.
</DIV>
<DIV STYLE="PADDING: 5px">
      <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
        <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
      </DIV>
</DIV>
<DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
      <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" onclick="stopLongProcess();" VALUE="Cancel">
</DIV>
</DIV>

<DIV ID="divModal"
STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 0px; Z-INDEX: 3"
onclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>

</body>
</html>

四十一文字滚动

CODE:

四十二可拖动窗口，附带鼠标控制渐变透明

CODE:

curDrag.MM_oldZ = (NS4)?curDrag.zIndex:MM_getProp(curDrag,'Z');
curLeft= (NS4)?curDrag.left:MM_getProp(curDrag,'L');
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:MM_getProp(curDrag,'T');
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:MM_getProp(aLayer,'Z');
    if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
    var isVisible = ((NS4)?aLayer.visibility:MM_getProp(aLayer,'V')).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 != document && MM_getProp(parentLayer,'P')) {
        parentL += parseInt(MM_getProp(parentLayer,'L')); parentT += parseInt(MM_getProp(parentLayer,'T'));
        parentLayer = parentLayer.parentNode;
        if (parentLayer==document) parentLayer = null;
      } } else if (IE) { parentLayer = aLayer.parentElement;
        while (parentLayer != null && MM_getProp(parentLayer,'P')) {
        parentL += MM_getProp(parentLayer,'L'); parentT += MM_getProp(parentLayer,'T');
        parentLayer = parentLayer.parentElement; } }
      var tmpX=mouseX-((NS4)?pageX:(MM_getProp(aLayer,'L'))+parentL+MM_hLeft);
      var tmpY=mouseY-((NS4)?pageY:(MM_getProp(aLayer,'T'))+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:MM_getProp(aLayer,'W');
      var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += (NS4)?clip.height:MM_getProp(aLayer,'H');
      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:MM_getProp(curDrag,'L');
    curTop = (NS4)?curDrag.top:MM_getProp(curDrag,'T');
    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) {
      var newZ = parseInt(document.MM_maxZ)+1;
      eval('curDrag.'+((NS4)?'':'style.')+'zIndex=newZ');
      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;
    var newLeft = mouseX-MM_oldX; var 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 + "px"; style.top = newTop + "px";}
    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:MM_getProp(document.MM_curDrag,'L')),2)+
        Math.pow(MM_targT-((NS4)?top:MM_getProp(document.MM_curDrag,'T')),2))<=MM_tol) {
      if (NS4) {left = MM_targL; top = MM_targT;}
      else if (NS6) {style.left = MM_targL + "px"; style.top = MM_targT + "px";}
      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;
}
//-->
</script>

四十三繁简体文字转换工具

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Haao's 博客</title>
<link href="style.css" rel="stylesheet" type="text/css">
</script>
</head>
<body>
<div align="center">
<table width="750" border="0" align="center" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td align="center" bgcolor="#F4F4F4"><b>欢迎使用繁简体文字转换工具</b></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><input type=button class="Submit" onclick=iText.value=iText.value.s2t() value='简→繁'>
    　
    <input type=button class="Submit" onclick=iText.value=iText.value.t2s() value='繁→简'>
    <br>
    <textarea cols="70" rows="8" class="transform" id="iText">欢迎使用繁简文本转换</textarea></td>
</tr>
</table>
<script>

function window.onload(){
var s="万与丑专业丛东丝丢两严丧个丬丰临为丽举么义乌乐乔习乡书买乱争于亏云亘亚产亩亲亵亸亿仅从仑仓仪们价众优伙会伛伞伟传伤伥伦伧伪伫体余佣佥侠侣侥侦侧侨侩侪侬俣俦俨俩俪俭债倾偬偻偾偿傥傧储傩儿兑兖党兰关兴兹养兽冁内冈册写军农冢冯冲决况冻净凄凉凌减凑凛几凤凫凭凯击凼凿刍划刘则刚创删别刬刭刽刿剀剂剐剑剥剧劝办务劢动励劲劳势勋勐勚匀匦匮区医华协单卖卢卤卧卫却卺厂厅历厉压厌厍厕厢厣厦厨厩厮县叁参叆叇双发变叙叠叶号叹叽吁后吓吕吗吣吨听启吴呒呓呕呖呗员呙呛呜咏咔咙咛咝咤咴咸哌响哑哒哓哔哕哗哙哜哝哟唛唝唠唡唢唣唤唿啧啬啭啮啰啴啸喷喽喾嗫嗬嗳嘘嘤嘱噜噼嚣嚯团园囱围囵国图圆圣圹场坂坏块坚坛坜坝坞坟坠垄垅垆垒垦垧垩垫垭垯垱垲垴埘埙埚埝埯堑堕塆塬墙壮声壳壶壸处备复够头夸夹夺奁奂奋奖奥妆妇妈妩妪妫姗姜娄娅娆娇娈娱娲娴婳婴婵婶媪嫒嫔嫱嬷孙学孪宁宝实宠审宪宫宽宾寝对寻导寿将尔尘尝尧尴尸尽层屃屉届属屡屦屿岁岂岖岗岘岙岚岛岭岳岽岿峃峄峡峣峤峥峦崂崃崄崭嵘嵚嵛嵝嵴巅巩巯币帅师帏帐帘帜带帧帮帱帻帼幂幞干并幺广庄庆庐庑库应庙庞废庼廪开异弃张弥弪弯弹强归当录彟彦彻径徕御忆忏忧忾怀态怂怃怄怅怆怜总怼怿恋恳恶恸恹恺恻恼恽悦悫悬悭悯惊惧惨惩惫惬惭惮惯愍愠愤愦愿慑慭憷懑懒懔戆戋戏戗战戬户扎扑扦执扩扪扫扬扰抚抛抟抠抡抢护报担拟拢拣拥拦拧拨择挂挚挛挜挝挞挟挠挡挢挣挤挥挦捞损捡换捣据捻掳掴掷掸掺掼揸揽揿搀搁搂搅携摄摅摆摇摈摊撄撑撵撷撸撺擞攒敌敛数斋斓斗斩断无旧时旷旸昙昼昽显晋晒晓晔晕晖暂暧札术朴机杀杂权条来杨杩杰极构枞枢枣枥枧枨枪枫枭柜柠柽栀栅标栈栉栊栋栌栎栏树栖样栾桊桠桡桢档桤桥桦桧桨桩梦梼梾检棂椁椟椠椤椭楼榄榇榈榉槚槛槟槠横樯樱橥橱橹橼檐檩欢欤欧歼殁殇残殒殓殚殡殴毁毂毕毙毡毵氇气氢氩氲汇汉污汤汹沓沟没沣沤沥沦沧沨沩沪沵泞泪泶泷泸泺泻泼泽泾洁洒洼浃浅浆浇浈浉浊测浍济浏浐浑浒浓浔浕涂涌涛涝涞涟涠涡涢涣涤润涧涨涩淀渊渌渍渎渐渑渔渖渗温游湾湿溃溅溆溇滗滚滞滟滠满滢滤滥滦滨滩滪漤潆潇潋潍潜潴澜濑濒灏灭灯灵灾灿炀炉炖炜炝点炼炽烁烂烃烛烟烦烧烨烩烫烬热焕焖焘煅煳煺熘爱爷牍牦牵牺犊犟犭状犷犸犹狈狍狝狞独狭狮狯狰狱狲猃猎猕猡猪猫猬献獭玑玙玚玛玮环现玱玺珉珏珐珑珰珲琎琏琐琼瑶瑷璇璎瓒瓮瓯电画畅畲畴疖疗疟疠疡疬疮疯疱疴痈痉痒痖痨痪痫痴瘅瘆瘗瘘瘪瘫瘾瘿癞癣癫癯皑皱皲盏盐监盖盗盘眍眦眬着睁睐睑瞒瞩矫矶矾矿砀码砖砗砚砜砺砻砾础硁硅硕硖硗硙硚确硷碍碛碜碱碹磙礼祎祢祯祷祸禀禄禅离秃秆种积称秽秾稆税稣稳穑穷窃窍窑窜窝窥窦窭竖竞笃笋笔笕笺笼笾筑筚筛筜筝筹签简箓箦箧箨箩箪箫篑篓篮篱簖籁籴类籼粜粝粤粪粮糁糇紧絷纟纠纡红纣纤纥约级纨纩纪纫纬纭纮纯纰纱纲纳纴纵纶纷纸纹纺纻纼纽纾线绀绁绂练组绅细织终绉绊绋绌绍绎经绐绑绒结绔绕绖绗绘给绚绛络绝绞统绠绡绢绣绤绥绦继绨绩绪绫绬续绮绯绰绱绲绳维绵绶绷绸绹绺绻综绽绾绿缀缁缂缃缄缅缆缇缈缉缊缋缌缍缎缏缐缑缒缓缔缕编缗缘缙缚缛缜缝缞缟缠缡缢缣缤缥缦缧缨缩缪缫缬缭缮缯缰缱缲缳缴缵罂网罗罚罢罴羁羟羡翘翙翚耢耧耸耻聂聋职聍联聩聪肃肠肤肷肾肿胀胁胆胜胧胨胪胫胶脉脍脏脐脑脓脔脚脱脶脸腊腌腘腭腻腼腽腾膑臜舆舣舰舱舻艰艳艹艺节芈芗芜芦苁苇苈苋苌苍苎苏苘苹茎茏茑茔茕茧荆荐荙荚荛荜荞荟荠荡荣荤荥荦荧荨荩荪荫荬荭荮药莅莜莱莲莳莴莶获莸莹莺莼萚萝萤营萦萧萨葱蒇蒉蒋蒌蓝蓟蓠蓣蓥蓦蔷蔹蔺蔼蕲蕴薮藁藓虏虑虚虫虬虮虽虾虿蚀蚁蚂蚕蚝蚬蛊蛎蛏蛮蛰蛱蛲蛳蛴蜕蜗蜡蝇蝈蝉蝎蝼蝾螀螨蟏衅衔补衬衮袄袅袆袜袭袯装裆裈裢裣裤裥褛褴襁襕见观觃规觅视觇览觉觊觋觌觍觎觏觐觑觞触觯詟誉誊讠计订讣认讥讦讧讨让讪讫训议讯记讱讲讳讴讵讶讷许讹论讻讼讽设访诀证诂诃评诅识诇诈诉诊诋诌词诎诏诐译诒诓诔试诖诗诘诙诚诛诜话诞诟诠诡询诣诤该详诧诨诩诪诫诬语诮误诰诱诲诳说诵诶请诸诹诺读诼诽课诿谀谁谂调谄谅谆谇谈谊谋谌谍谎谏谐谑谒谓谔谕谖谗谘谙谚谛谜谝谞谟谠谡谢谣谤谥谦谧谨谩谪谫谬谭谮谯谰谱谲谳谴谵谶谷豮贝贞负贠贡财责贤败账货质贩贪贫贬购贮贯贰贱贲贳贴贵贶贷贸费贺贻贼贽贾贿赀赁赂赃资赅赆赇赈赉赊赋赌赍赎赏赐赑赒赓赔赕赖赗赘赙赚赛赜赝赞赟赠赡赢赣赪赵赶趋趱趸跃跄跖跞践跶跷跸跹跻踊踌踪踬踯蹑蹒蹰蹿躏躜躯车轧轨轩轪轫转轭轮软轰轱轲轳轴轵轶轷轸轹轺轻轼载轾轿辀辁辂较辄辅辆辇辈辉辊辋辌辍辎辏辐辑辒输辔辕辖辗辘辙辚辞辩辫边辽达迁过迈运还这进远违连迟迩迳迹适选逊递逦逻遗遥邓邝邬邮邹邺邻郁郄郏郐郑郓郦郧郸酝酦酱酽酾酿释里鉅鉴銮錾钆钇针钉钊钋钌钍钎钏钐钑钒钓钔钕钖钗钘钙钚钛钝钞钟钠钡钢钣钤钥钦钧钨钩钪钫钬钭钮钯钰钱钲钳钴钵钶钷钸钹钺钻钼钽钾钿铀铁铂铃铄铅铆铈铉铊铋铌铍铎铏铐铑铒铓铔铕铖铗铘铙铚铛铜铝铞铟铠铡铢铣铤铥铦铧铨铩铪铫铬铭铮铯铰铱铲铳铴铵银铷铸铹铺铻铼铽链铿销锁锂锃锄锅锆锇锈锉锊锋锌锍锎锏锐锑锒锓锔锕锖锗锘错锚锛锜锝锞锟锠锡锢锣锤锥锦锧锨锩锪锫锬锭键锯锰锱锲锳锴锵锶锷锸锹锺锻锼锽锾锿镀镁镂镃镄镅镆镇镈镉镊镋镌镍镎镏镐镑镒镓镔镕镖镗镘镙镚镛镜镝镞镟镠镡镢镣镤镥镦镧镨镩镪镫镬镭镮镯镰镱镲镳镴镵镶长门闩闪闫闬\闭问闯闰闱闲闳间闵闶闷闸闹闺闻闼闽闾闿阀阁阂阃阄阅阆阇阈阉阊阋阌阍阎阏阐阑阒阓阔阕阖阗阘阙阚阛队阳阴阵阶际陆陇陈陉陕陧陨险随隐隶隽难雏雠雳雾霁霉霭靓静靥鞑鞒鞯鞴韦韧韨韩韪韫韬韵页顶顷顸项顺须顼顽顾顿颀颁颂颃预颅领颇颈颉颊颋颌颍颎颏颐频颒颓颔颕颖颗题颙颚颛颜额颞颟颠颡颢颣颤颥颦颧风飏飐飑飒飓飔飕飖飗飘飙飚飞飨餍饤饥饦饧饨饩饪饫饬饭饮饯饰饱饲饳饴饵饶饷饸饹饺饻饼饽饾饿馀馁馂馃馄馅馆馇馈馉馊馋馌馍馎馏馐馑馒馓馔馕马驭驮驯驰驱驲驳驴驵驶驷驸驹驺驻驼驽驾驿骀骁骂骃骄骅骆骇骈骉骊骋验骍骎骏骐骑骒骓骔骕骖骗骘骙骚骛骜骝骞骟骠骡骢骣骤骥骦骧髅髋髌鬓魇魉鱼鱽鱾鱿鲀鲁鲂鲄鲅鲆鲇鲈鲉鲊鲋鲌鲍鲎鲏鲐鲑鲒鲓鲔鲕鲖鲗鲘鲙鲚鲛鲜鲝鲞鲟鲠鲡鲢鲣鲤鲥鲦鲧鲨鲩鲪鲫鲬鲭鲮鲯鲰鲱鲲鲳鲴鲵鲶鲷鲸鲹鲺鲻鲼鲽鲾鲿鳀鳁鳂鳃鳄鳅鳆鳇鳈鳉鳊鳋鳌鳍鳎鳏鳐鳑鳒鳓鳔鳕鳖鳗鳘鳙鳛鳜鳝鳞鳟鳠鳡鳢鳣鸟鸠鸡鸢鸣鸤鸥鸦鸧鸨鸩鸪鸫鸬鸭鸮鸯鸰鸱鸲鸳鸴鸵鸶鸷鸸鸹鸺鸻鸼鸽鸾鸿鹀鹁鹂鹃鹄鹅鹆鹇鹈鹉鹊鹋鹌鹍鹎鹏鹐鹑鹒鹓鹔鹕鹖鹗鹘鹙鹚鹛鹜鹝鹞鹟鹠鹡鹢鹣鹤鹥鹦鹧鹨鹩鹪鹫鹬鹭鹯鹰鹱鹲鹳鹴鹾麦麸黄黉黡黩黪黾鼋鼌鼍鼗鼹齄齐齑齿龀龁龂龃龄龅龆龇龈龉龊龋龌龙龚龛龟\"

var t="萬與醜專業叢東絲丟兩嚴喪個爿豐臨為麗舉麼義烏樂喬習鄉書買亂爭於虧雲亙亞產畝親褻嚲億僅從侖倉儀們價眾優夥會傴傘偉傳傷倀倫傖偽佇體餘傭僉俠侶僥偵側僑儈儕儂俁儔儼倆儷儉債傾傯僂僨償儻儐儲儺兒兌兗黨蘭關興茲養獸囅內岡冊寫軍農塚馮沖決況凍淨淒涼淩減湊凜幾鳳鳧憑凱擊氹鑿芻劃劉則剛創刪別剗剄劊劌剴劑剮劍剝劇勸辦務勱動勵勁勞勢勳猛勩勻匭匱區醫華協單賣盧鹵臥衛卻巹廠廳曆厲壓厭厙廁廂厴廈廚廄廝縣三參靉靆雙發變敘疊葉號歎嘰籲後嚇呂嗎唚噸聽啟吳嘸囈嘔嚦唄員咼嗆嗚詠哢嚨嚀噝吒噅鹹呱響啞噠嘵嗶噦嘩噲嚌噥喲嘜嗊嘮啢嗩唕喚呼嘖嗇囀齧囉嘽嘯噴嘍嚳囁呵噯噓嚶囑嚕劈囂謔團園囪圍圇國圖圓聖壙場阪壞塊堅壇壢壩塢墳墜壟壟壚壘墾坰堊墊埡墶壋塏堖塒塤堝墊垵塹墮壪原牆壯聲殼壺壼處備複夠頭誇夾奪奩奐奮獎奧妝婦媽嫵嫗媯姍薑婁婭嬈嬌孌娛媧嫻嫿嬰嬋嬸媼嬡嬪嬙嬤孫學孿\寧寶實寵審憲宮寬賓寢對尋導壽將爾塵嘗堯尷屍盡層屭屜屆屬屢屨嶼歲豈嶇崗峴嶴嵐島嶺嶽崠巋嶨嶧峽嶢嶠崢巒嶗崍嶮嶄嶸嶔崳嶁脊巔鞏巰幣帥師幃帳簾幟帶幀幫幬幘幗冪襆幹並么廣莊慶廬廡庫應廟龐廢廎廩開異棄張彌弳彎彈強歸當錄彠彥徹徑徠禦憶懺憂愾懷態慫憮慪悵愴憐總懟懌戀懇惡慟懨愷惻惱惲悅愨懸慳憫驚懼慘懲憊愜慚憚慣湣慍憤憒願懾憖怵懣懶懍戇戔戲戧戰戩戶紮撲扡執擴捫掃揚擾撫拋摶摳掄搶護報擔擬攏揀擁攔擰撥擇掛摯攣掗撾撻挾撓擋撟掙擠揮撏撈損撿換搗據撚擄摑擲撣摻摜摣攬撳攙擱摟攪攜攝攄擺搖擯攤攖撐攆擷擼攛擻攢敵斂數齋斕鬥斬斷無舊時曠暘曇晝曨顯晉曬曉曄暈暉暫曖劄術樸機殺雜權條來楊榪傑極構樅樞棗櫪梘棖槍楓梟櫃檸檉梔柵標棧櫛櫳棟櫨櫟欄樹棲樣欒棬椏橈楨檔榿橋樺檜槳樁夢檮棶檢欞槨櫝槧欏橢樓欖櫬櫚櫸檟檻檳櫧橫檣櫻櫫櫥櫓櫞簷檁歡歟歐殲歿殤殘殞殮殫殯毆毀轂畢斃氈毿氌氣氫氬氳彙漢汙湯洶遝溝沒灃漚瀝淪滄渢溈滬濔濘淚澩瀧瀘濼瀉潑澤涇潔灑窪浹淺\漿澆湞溮濁測澮濟瀏滻渾滸濃潯濜塗湧濤澇淶漣潿渦溳渙滌潤澗漲澀澱淵淥漬瀆漸澠漁瀋滲溫遊灣濕潰濺漵漊潷滾滯灩灄滿瀅濾濫灤濱灘澦濫瀠瀟瀲濰潛瀦瀾瀨瀕灝滅燈靈災燦煬爐燉煒熗點煉熾爍爛烴燭煙煩燒燁燴燙燼熱煥燜燾煆糊退溜愛爺牘犛牽犧犢強犬狀獷獁猶狽麅獮獰獨狹獅獪猙獄猻獫獵獼玀豬貓蝟獻獺璣璵瑒瑪瑋環現瑲璽瑉玨琺瓏璫琿璡璉瑣瓊瑤璦璿瓔瓚甕甌電畫暢佘疇癤療瘧癘瘍鬁瘡瘋皰屙癰痙癢瘂癆瘓癇癡癉瘮瘞瘺癟癱癮癭癩癬癲臒皚皺皸盞鹽監蓋盜盤瞘眥矓著睜睞瞼瞞矚矯磯礬\礦碭碼磚硨硯碸礪礱礫礎硜矽碩硤磽磑礄確鹼礙磧磣堿镟滾禮禕禰禎禱禍稟祿禪離禿稈種積稱穢穠穭稅穌穩穡窮竊竅窯竄窩窺竇窶豎競篤筍筆筧箋籠\籩築篳篩簹箏籌簽簡籙簀篋籜籮簞簫簣簍籃籬籪籟糴類秈糶糲粵糞糧糝餱緊縶糸糾紆紅紂纖紇約級紈纊紀紉緯紜紘純紕紗綱納紝縱綸紛紙紋紡紵紖紐紓線紺絏紱練組紳細織終縐絆紼絀紹繹經紿綁絨結絝繞絰絎繪給絢絳絡絕絞統綆綃絹繡綌綏絛繼綈績緒綾緓續綺緋綽緔緄繩維綿綬繃綢綯綹綣綜綻綰綠綴緇緙緗緘緬纜緹緲緝縕繢緦綞緞緶線緱縋緩締縷編緡緣縉縛縟縝縫縗縞纏縭縊縑繽縹縵縲纓縮繆繅纈繚繕繒韁\繾繰繯繳纘罌網羅罰罷羆羈羥羨翹翽翬耮耬聳恥聶聾職聹聯聵聰肅腸膚膁腎腫脹脅膽勝朧腖臚脛膠脈膾髒臍腦膿臠腳脫腡臉臘醃膕齶膩靦膃騰臏臢輿艤艦艙艫艱豔艸藝節羋薌蕪蘆蓯葦藶莧萇蒼苧蘇檾蘋莖蘢蔦塋煢繭荊薦薘莢蕘蓽蕎薈薺蕩榮葷滎犖熒蕁藎蓀蔭蕒葒葤藥蒞蓧萊蓮蒔萵薟獲蕕瑩鶯蓴蘀蘿螢營縈蕭薩蔥蕆蕢蔣蔞藍薊蘺蕷鎣驀薔蘞藺藹蘄蘊藪槁蘚\虜慮虛蟲虯蟣雖蝦蠆蝕蟻螞蠶蠔蜆蠱蠣蟶蠻蟄蛺蟯螄蠐蛻蝸蠟蠅蟈蟬蠍螻蠑螿蟎蠨釁銜補襯袞襖\嫋褘襪襲襏裝襠褌褳襝褲襇褸襤繈襴見觀覎規覓視覘覽覺覬覡覿覥覦覯覲覷觴觸觶讋譽謄訁計訂訃認譏訐訌討讓訕訖訓議訊記訒講諱謳詎訝訥許訛論訩訟諷設訪訣證詁訶評詛識詗詐訴診詆謅詞詘詔詖譯詒誆誄試詿詩詰詼誠\誅詵話誕詬詮詭詢詣諍該詳詫諢詡譸誡誣語誚誤誥誘誨誑說誦誒請諸諏諾讀諑誹課諉諛誰諗調諂諒諄誶談誼謀諶諜謊諫諧謔謁謂諤諭諼讒諮諳諺諦謎諞諝謨讜謖謝謠謗諡謙謐謹謾謫譾謬譚譖譙讕譜譎讞譴譫讖穀豶貝貞負貟貢財責賢敗賬貨質販貪貧貶購貯貫貳賤賁貰貼貴貺貸貿費賀貽賊\贄賈賄貲賃賂贓資賅贐賕賑賚賒賦賭齎贖賞賜贔賙賡賠賧賴賵贅賻賺賽賾贗贊贇贈贍贏贛赬趙趕趨趲躉躍蹌蹠躒踐躂蹺蹕躚躋踴躊蹤躓躑躡蹣躕躥躪躦軀車軋軌軒軑軔轉軛輪軟轟軲軻轤軸軹軼軤軫轢軺輕軾載輊轎輈輇輅較輒輔輛輦輩輝輥輞輬輟輜輳輻輯轀輸轡轅轄輾轆轍轔辭辯辮邊遼達遷過邁運\還這進遠違連遲邇逕跡適選遜遞邐邏遺遙鄧鄺鄔郵鄒鄴鄰鬱郤郟鄶鄭鄆酈鄖鄲醞醱醬釅釃釀釋裏钜鑒鑾鏨釓釔針釘釗釙釕釷釺釧釤鈒釩釣鍆釹鍚釵鈃鈣鈈鈦鈍鈔鍾鈉鋇鋼鈑鈐鑰欽鈞鎢鉤鈧鈁鈥鈄鈕鈀鈺錢鉦鉗鈷缽鈳鉕鈽鈸鉞鑽鉬鉭鉀鈿鈾鐵鉑鈴鑠鉛鉚鈰鉉鉈鉍鈮鈹鐸鉶銬銠鉺鋩錏銪鋮鋏鋣鐃銍鐺銅鋁銱銦鎧鍘銖銑鋌銩銛鏵銓鎩鉿銚鉻銘錚銫鉸銥鏟銃鐋銨銀銣鑄鐒鋪鋙錸鋱鏈鏗銷鎖鋰鋥鋤鍋鋯鋨鏽銼鋝鋒鋅鋶鐦鐧銳銻鋃鋟鋦錒錆鍺鍩錯錨錛錡鍀錁錕錩錫錮鑼錘錐錦\鑕鍁錈鍃錇錟錠鍵鋸錳錙鍥鍈鍇鏘鍶鍔鍤鍬鍾鍛鎪鍠鍰鎄鍍鎂鏤鎡鐨鎇鏌鎮鎛鎘鑷钂鐫鎳鎿鎦鎬鎊鎰鎵鑌鎔鏢鏜鏝鏍鏰鏞鏡鏑鏃鏇鏐鐔钁鐐鏷鑥鐓鑭鐠鑹鏹鐙鑊鐳鐶鐲鐮鐿鑔鑣鑞鑱鑲長門閂閃閆閈\閉問闖閏闈閑閎間閔閌悶閘鬧閨聞闥閩閭闓閥閣閡閫鬮閱閬闍閾閹閶鬩閿閽閻閼闡闌闃闠闊闋闔闐闒闕闞闤隊陽陰陣階際陸隴陳陘陝隉隕險隨隱隸雋難雛讎靂霧霽黴靄靚靜靨韃鞽韉韝韋韌韍韓韙韞韜韻頁頂頃頇項順須頊頑顧頓頎頒頌頏預顱領頗頸頡頰頲頜潁熲頦頤頻頮頹頷頴穎顆題顒顎顓顏額顳顢顛顙顥纇顫顬顰顴風颺颭颮颯颶颸\颼颻飀飄飆飆飛饗饜飣饑飥餳飩餼飪飫飭飯飲餞飾飽飼飿飴餌饒餉餄餎餃餏餅餑餖餓餘餒餕餜餛餡館餷饋餶餿饞饁饃餺餾饈饉饅饊饌饢馬馭馱馴馳驅馹駁驢駔駛駟駙駒騶駐駝駑駕驛駘驍罵駰驕驊駱駭駢驫驪騁驗騂駸駿騏騎騍騅騌驌驂騙騭騤騷騖驁騮騫騸驃騾驄驏驟驥驦驤髏髖髕鬢魘魎魚魛魢魷魨魯魴魺鮁鮃鯰鱸鮋鮓鮒鮊鮑鱟鮍鮐鮭鮚鮳鮪鮞鮦鰂鮜鱠鱭鮫鮮鮺鯗鱘\鯁鱺鰱鰹鯉鰣鰷鯀鯊鯇鮶鯽鯒鯖鯪鯕鯫鯡鯤鯧鯝鯢鯰鯛鯨鯵鯴鯔鱝鰈鰏鱨鯷鰮鰃鰓鱷鰍鰒鰉鰁鱂鯿鰠鼇鰭鰨鰥鰩鰟鰜鰳鰾鱈鱉鰻鰵鱅鰼鱖鱔鱗鱒鱯鱤鱧鱣鳥鳩雞鳶鳴鳲鷗鴉鶬鴇鴆鴣鶇鸕鴨鴞鴦鴒鴟鴝鴛鴬鴕鷥鷙鴯鴰鵂鴴鵃鴿鸞鴻鵐鵓鸝鵑鵠鵝鵒鷳鵜鵡鵲鶓鵪鶤鵯鵬鵮鶉鶊鵷鷫鶘鶡鶚鶻鶖鶿鶥鶩鷊鷂鶲鶹鶺鷁鶼鶴鷖鸚鷓鷚鷯鷦鷲鷸鷺鸇鷹鸌鸏鸛鸘鹺麥麩黃黌黶黷黲黽黿鼂鼉鞀鼴齇齊齏齒齔齕齗齟齡齙齠齜齦齬齪齲齷龍龔龕龜\"

function String.prototype.s2t(){
var k=''
for(var i=0;i<this.length;i++) k+=(s.indexOf(this.charAt(i))==-1)?this.charAt(i):t.charAt(s.indexOf(this.charAt(i)))
return k
}

function String.prototype.t2s(){
var k=''
for(var i=0;i<this.length;i++) k+=(t.indexOf(this.charAt(i))==-1)?this.charAt(i):s.charAt(t.indexOf(this.charAt(i)))
return k
}

}

</script>
</div>
</body>
</html>

四十四收集整理的四个方向的滚动

向上滚动

CODE:

<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML //克隆demo1为demo2
function Marquee(){
//当滚动至demo1与demo2交界时
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight //demo跳到最顶端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseover=function() {clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

[Copy to clipboard]

向下滚动

CODE:

<div id=demo style=overflow:hidden;height:100;width:90;
background:#214984;color:#ffffff>
<div id=demo1>
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
<img src="[img]http://www.haao.cn/logo.gif[/img]">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

[Copy to clipboard]

向左滚动

CODE:

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="demo1" valign="top" align="center">
      <table cellpadding="2" cellspacing="0" border="0">
        <tr align="center">
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        </tr>
      </table>
    </td>
    <td id="demo2" valign="top"></td>
    </tr>
    </table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

[Copy to clipboard]

向右滚动

CODE:

<div id="demo" style="overflow:hidden;width:670px;color:#ffffff;">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr><td id="demo1" valign="top" align="center">
      <table cellpadding="2" cellspacing="0" border="0">
        <tr align="center">
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
            <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        <td><img src="[img]http://www.haao.cn/logo.gif[/img]" width="88"></td>
        </tr>
      </table>
    </td>
    <td id="demo2" valign="top"></td>
    </tr>
    </table>
</div>
<script>
var speed=1//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

四十五将HTML自动转为JS代码

CODE:

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

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

四十六锁定表列

CODE:

<HTML><HEAD><TITLE>锁定表格栏位范例网页</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT: 12px 细明体; CURSOR: default
}
TD {
FONT: 12px 细明体; CURSOR: default
}
.title {
BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: #ccc; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap
}
.cdata {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; BACKGROUND: #fff; PADDING-BOTTOM: 3px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap
}
</STYLE>

<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 )
var DataTitles=new Array(
"歌手 / 团体#90 #left" ,
"专辑名称   #130#left" ,
"发行公司   #110#left" ,
"本周排名   #58 #center",
"排名状况   #58 #center",
"上周排名   #58 #center",
"上榜周数   #58 #center",
"最高名次   #58 #center",
"销售百分比 #70 #center")
// 栏位资料 ( 二维阵列 )
var DataFields=new Array()
DataFields[0] =new Array("萧亚轩" ,"爱的主打歌-吻"   ,"维京 Virgin"   ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %")
DataFields[1] =new Array("张惠妹" ,"发烧"         ,"华纳 Warner"   ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %")
DataFields[2] =new Array("陶吉吉" ,"黑色柳丁"     ,"全员集合 Shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %")
DataFields[3] =new Array("S.H.E"   ,"美丽新世界"     ,"华研 HIM"     ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %")
DataFields[4] =new Array("艾薇儿" ,"展翅高飞"     ,"博德曼 BMG"   ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %")
DataFields[5] =new Array("任贤齐" ,"一个任贤齐"     ,"滚石 Rock"     ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %")
DataFields[6] =new Array("范逸臣" ,"范逸臣第一张专辑","丰华 Forward"   ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %")
DataFields[7] =new Array("谢霆锋" ,"无形的他全精选" ,"新力 Sony"     ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %")
DataFields[8] =new Array("周蕙"   ,"寂寞城市"     ,"福茂 Decca"   ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %")
DataFields[9] =new Array("周杰伦" ,"八度空间"     ,"博德曼 BMG"   ,"10","下跌" ,"8" ,"8","1" ,"0.8 %")
DataFields[10]=new Array("酷玩乐团","玩过头"       ,"科艺百代 EMI"   ,"11","上升" ,"16","2","11","0.7 %")
DataFields[11]=new Array("张震岳" ,"等我有一天"     ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %")
DataFields[12]=new Array("堂本刚" ,"红与蓝"       ,"艾回 Avex"     ,"13","新进榜","-" ,"1","13","0.6 %")
DataFields[13]=new Array("ENERGY" ,"COME ON"       ,"环球 Universal" ,"14","下跌" ,"10","9","5" ,"0.6 %")
DataFields[14]=new Array("陈冠希" ,"TRANSITION"     ,"艾回 Avex"     ,"15","下跌" ,"9" ,"3","5" ,"0.4 %")
DataFields[15]=new Array("合辑"   ,"MTV 嘻哈大师"   ,"环球 Universal" ,"16","下跌" ,"12","3","12","0.4 %")
</SCRIPT>

<SCRIPT language=JavaScript>
var BoxWidth = 480   // 资料表显示宽度 ( 不含卷轴 )
var ShowLine = 10   // 资料表显示列数
var RsHeight = 21   // 资料列高度
var LockCols = 1   // 要锁定的栏位数 ( 由左至右 )
function WriteTable(){   // 写入表格
var iBoxWidth=BoxWidth
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>\
<td><div style=\"width:100%;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i<DataTitles.length;i++){
if(i<LockCols){
var cTitle=DataTitles[i].split("#")
iBoxWidth-=cTitle[1]
var DynTip=((i+1)==LockCols)?"解除锁定":"锁定此栏位"
NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\""+DynTip+"\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
}
}
NewHTML+="</tr>\
<tr><td colspan=\""+LockCols+"\">\
<div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup1\" style=\"position:relative\"></div></div>\
</td></tr></table></div></td>\
<td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\">\
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr>"
for(i=0;i<DataTitles.length;i++){
if(i>=LockCols){
var cTitle=DataTitles[i].split("#")
NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" title=\"锁定此栏位\" onclick=\"ResetTable("+i+")\">"+cTitle[0]+"</div></td>"
}
}
NewHTML+="</tr>\
<tr><td colspan=\""+(DataTitles.length-LockCols)+"\">\
<div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\">\
<div id=\"DataGroup2\" style=\"position:relative\"></div>\
</div></td></tr></table>\
</div></td><td valign=\"top\">\
<div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\">\
<div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div>\
</div></td></tr></table>"
DataTable.innerHTML=NewHTML
ApplyData()
}
function ApplyData(){   // 写入资料
var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"
for(i=0;i<DataFields.length;i++){
NewHTML+="<tr>"
for(j=0;j<DataTitles.length;j++){
if(j<LockCols){
    var cTitle=DataTitles[j].split("#")
    NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"
}
}
NewHTML+="</tr>"
}
NewHTML+="</table>"
DataGroup1.innerHTML=NewHTML

<META content="MSHTML 6.00.3790.2666" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<H4>锁定表格栏位范例网页</H4>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">
<DIV id=DataTable>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV style="OVERFLOW-X: scroll; WIDTH: 100%">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=解除锁定 style="WIDTH: 90px; HEIGHT: 21px" onclick=ResetTable(0)>歌手 / 团体</DIV></TD></TR>
<TR>
<TD>
<DIV id=DataFrame1 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup1 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">萧亚轩</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张惠妹</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陶吉吉</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">S.H.E</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">艾薇儿</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">任贤齐</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">谢霆锋</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周蕙</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">周杰伦</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">酷玩乐团</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">张震岳</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">堂本刚</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">ENERGY</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">陈冠希</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 90px; HEIGHT: 21px; TEXT-ALIGN: left">合辑</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV style="OVERFLOW-X: scroll; WIDTH: 390px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 130px; HEIGHT: 21px" onclick=ResetTable(1)>专辑名称 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 110px; HEIGHT: 21px" onclick=ResetTable(2)>发行公司 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(3)>本周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(4)>排名状况 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(5)>上周排名 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(6)>上榜周数 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 58px; HEIGHT: 21px" onclick=ResetTable(7)>最高名次 </DIV></TD>
<TD>
<DIV class=title title=锁定此栏位 style="WIDTH: 70px; HEIGHT: 21px" onclick=ResetTable(8)>销售百分比 </DIV></TD></TR>
<TR>
<TD colSpan=8>
<DIV id=DataFrame2 style="OVERFLOW: hidden; WIDTH: 100%; POSITION: relative; HEIGHT: 210px">
<DIV id=DataGroup2 style="POSITION: relative">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">爱的主打歌-吻</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">维京 Virgin</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">发烧</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华纳 Warner</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">2.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">黑色柳丁</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">全员集合 Shock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">美丽新世界</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">华研 HIM</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.2 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">展翅高飞</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.1 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">一个任贤齐</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">滚石 Rock</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">1.0 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">范逸臣第一张专辑</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">丰华 Forward</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">持平</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">7</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">无形的他全精选</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">新力 Sony</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">6</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">4</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.9 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">寂寞城市</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">福茂 Decca</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">八度空间</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">博德曼 BMG</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">8</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.8 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">玩过头</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">科艺百代 EMI</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">上升</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">2</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">11</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.7 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">等我有一天</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">魔岩 Magicstone</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">红与蓝</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">新进榜</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">-</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">1</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">13</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">COME ON</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">14</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">10</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.6 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">TRANSITION</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">艾回 Avex</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">15</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">9</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">5</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR>
<TR>
<TD>
<DIV class=cdata style="WIDTH: 130px; HEIGHT: 21px; TEXT-ALIGN: left">MTV 嘻哈大师</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 110px; HEIGHT: 21px; TEXT-ALIGN: left">环球 Universal</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">16</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">下跌</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">3</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 58px; HEIGHT: 21px; TEXT-ALIGN: center">12</DIV></TD>
<TD>
<DIV class=cdata style="WIDTH: 70px; HEIGHT: 21px; TEXT-ALIGN: center">0.4 %</DIV></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top>
<DIV id=DataFrame3 style="OVERFLOW-Y: scroll; BACKGROUND: #000; POSITION: relative; HEIGHT: 231px" onscroll=SYNC_Roll()>
<DIV id=DataGroup3 style="VISIBILITY: hidden; WIDTH: 1px; POSITION: relative; HEIGHT: 357px"></DIV></DIV></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
<P>点取栏位标题可重新设定或解除目前的锁定状态</P></CENTER></BODY></HTML>

四十七滚动的图片

CODE:

<SCRIPT language=JavaScript>
var dde_para = new Array();
var dde_aa   = new Array();
var dde_url = document.location.href;
var dde_pp   = dde_url.split("#")[1];
var jspfile = 1;
var para   = null;

//滚动页面的宽
var scrollwidth = 705;

//滚动页面的高
var scrollheight = 120;

if(dde_pp!=null && dde_pp.length>0){
dde_para = dde_pp.split("&");}
for(i=0; dde_para!=null && i<dde_para.length;i++){
dde_aa = dde_para[i].split("=");
eval("var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
var car_num = 5;
var i=1;
//默认滚动时间10秒
var pausebetweenimages=800 * 8;
var slideimages=new Array();
//滚动页面1的URL
slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='[url]http://news.qq.com/photon/08photojdlm1.htm[/url]'></iframe>";
//滚动页面2的URL
slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0 marginheight=0 framespacing=0 frameborder=0 scrolling=no width="+scrollwidth+" height="+scrollheight+" src='[url]http://news.qq.com/photon/08photojdlm2.htm[/url]'></iframe>";
function move1(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=car_num){
tdiv.style.pixelTop=0
setTimeout("move1(tdiv)",pausebetweenimages)
setTimeout("move2(second2)",pausebetweenimages)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=car_num
setTimeout("move1(tdiv)",50)}
else{
tdiv.style.pixelTop=scrollheight
tdiv.innerHTML=slideimages[0]
if (i==slideimages.length-1)
i=0
else i++}}
function move2(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=car_num){
tdiv2.style.pixelTop=0
setTimeout("move2(tdiv2)",pausebetweenimages)
setTimeout("move1(first2)",pausebetweenimages)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=car_num
setTimeout("move2(second2)",50)}
else{
tdiv2.style.pixelTop=scrollheight
tdiv2.innerHTML=slideimages[1]
if (i==slideimages.length-1)
i=0
else i++}}
function conmouse(){car_num=0;}
function cmouseout(){car_num=5;}
function startscroll(){
if (document.all){
move1(first2)
second2.style.top=scrollheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollheight+5
document.main.document.second.visibility='show'}}
//-->
</SCRIPT>
<ILAYER id=main height="&{scrollheight};"
    width="&{scrollwidth};">
<LAYER name="first" left="0"
    top="1" width="&{scrollwidth};" id=first>
<SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[0])
</SCRIPT>
</LAYER>
<LAYER id=second width="&{scrollwidth};" top="0" left="0"
    visibility="hide">
<SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[1])
</SCRIPT>
</LAYER>
</ILAYER>
<script language=JavaScript1.2>
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollwidth+';height:'+scrollheight+';overflow:hiden;background-color:#ffffff">')
document.writeln('<div onMouseOver="conmouse()" onMouseOut="cmouseout()" style="position:absolute;width:'+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')}
startscroll();
</script>

四十八放大镜特效

CODE:

var zoomw=250;
var zoomh=220;
var defzoomamount=4;

var zoomamountstep=1.2;
var zoomsizemin=1000;
var zoomsizemax=100000;
var zoomsizestep=1.2;
var zoomamountmin=1;
var zoomamountmax=12;

function zoom_init() {
document.getElementById(zoomid+'_clip').style.width=objw*zoomamount+'px';
document.getElementById(zoomid+'_clip').style.height=objh*zoomamount+'px';
setTimeout("document.getElementById('"+zoomid+"_trigger').focus();",0);
}

w2=((xx+zoomw/2<objw)?((zoomw/2<xx)?(zoomw):(zoomw/2+xx)):(zoomw/2+objw-xx)); if(w2<0) {w2=0;} document.getElementById(zoomid+'_container').style.width=w2+'px';
h2=((yy+zoomh/2<objh)?((zoomh/2<yy)?(zoomh):(zoomh/2+yy)):(zoomh/2+objh-yy)); if(h2<0) {h2=0;} document.getElementById(zoomid+'_container').style.height=h2+'px';
return false;
}

function zoom_off() {
document.getElementById(zoomid+'_container').style.width='0px';
document.getElementById(zoomid+'_container').style.height='0px';
zoomid='';
}

var zoomamount=defzoomamount; var objw;var objh;var zoomid=''; var zoomratio=zoomw/zoomh; var ieox=0; var ieoy=0; var ffox=0; var ffoy=0;
</script><div style="float:left" onmouseover="zoom_on(event,580,435,'[img]http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg[/img]','[img]http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg[/img]');" onmousemove="zoom_move(event);"
onmouseout="zoom_off();"><img src="[img]http://thw.029ftp.com/attachments/month_0512/85wa_1.jpg[/img]"/></div>
<div style="clear:both;"></div>

四十九无名,感觉像黑克帝国

CODE:

<html>
<head>
<title>This's My Life留言簿--->观看留言</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
n=1
function n0(){if(n>1)n--}
function n1(){if(n<9)n++;if(n>9)n=1}
function s1(){if(n==1)MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==2)MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==3)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','show','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==4)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','show','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==5)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','show','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==6)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','show','Layer7','','hide','Layer8','','hide','Layer9','','hide');
if(n==7)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','show','Layer8','','hide','Layer9','','hide');
if(n==8)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','show','Layer9','','hide');
if(n==9)MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer5','','hide','Layer6','','hide','Layer7','','hide','Layer8','','hide','Layer9','','show')
}
</script>
<head>
<body bgcolor=#000000>
<SCRIPT language=JavaScript>
<!--
if (document.all){
Cols=18;
Cl=24;//Space's are included so real length is 48!
Cs=12;
Ts=12;
Tc='#008800';
Tc1='#00ff00';
MnS=20;
MxS=30;
I=Cs;
Sp=new Array();S=new Array();Y=new Array();
C=new Array();M=new Array();B=new Array();
RC=new Array();E=new Array();Tcc=new Array(0,1);
document.write("<div id='Container' style='position:absolute;top:0;left:-"+Cs+"'>");
document.write("<div style='position:relative'>");
for(i=0; i < Cols; i++){
S[i]=I+=Cs;
document.write("<div id='A' style='position:absolute;top:0;font-family:Arial;font-size:"
+Ts+"px;left:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden'></div>");
}
document.write("</div></div>");
for(j=0; j < Cols; j++){
RC[j]=1+Math.round(Math.random()*Cl);
Y[j]=0;
Sp[j]=Math.round(MnS+Math.random()*MxS);
for(i=0; i < RC[j]; i++){
B[i]='';
C[i]=Math.round(Math.random()*1)+' ';
M[j]=B[0]+=C[i];
}
}
function Cycle(){
Container.style.top=window.document.body.scrollTop;
for (i=0; i < Cols; i++){
var r = Math.floor(Math.random()*Tcc.length);
E[i] = '<font color='+Tc1+'>'+Tcc[r]+'</font>';
Y[i]+=Sp[i];

if (Y[i] > window.document.body.clientHeight){
for(i2=0; i2 < Cols; i2++){
RC[i2]=1+Math.round(Math.random()*Cl);
for(i3=0; i3 < RC[i2]; i3++){
B[i3]='';
C[i3]=Math.round(Math.random()*1)+' ';
C[Math.floor(Math.random()*i2)]=' '+' ';
M[i]=B[0]+=C[i3];
Y[i]=-Ts*M[i].length/1.5;
A[i].style.visibility='visible';
}
Sp[i]=Math.round(MnS+Math.random()*MxS);
}
}
A[i].style.top=Y[i];
A[i].innerHTML=M[i]+' '+E[i]+' ';
}
setTimeout('Cycle()',55)
}
Cycle();
}
// -->
</SCRIPT>
DEMO : <a href="[url]http://www.sqbook.com/asp/home/sqbook/index.asp?adminuser=cnbohu[/url]">[url]http://www.sqbook.com/asp/home/sqbook/index.asp?adminuser=cnbohu</a>[/url]

From : <a href="[url]http://bohu.net[/url]">[url]http://bohu.net</a>[/url]

</body>
</html>

五十美丽的菜单

CODE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[url]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
<title>Phenix PanelBar</title>
<script language="javascript">
/*--------------------------------------------------|
| Phenix PanelBar | [url]www.seu.edu.cn[/url]             |
|---------------------------------------------------|
|                                   |
| I believe one day I can fly like phenix!       |
|                                   |
| Finished: 17.11.2004                     |
|--------------------------------------------------*/

//item object
//alert("arrived here");
function PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target){

this.id=id;
this.pid=pid;
this.label=label;
this.url=url;
this.title=title;
this.target=target;
this.img=img;
this.over=over;
this.img2=img2;
this.over2=over2;
this.type=type;
//this._ih = false;    //is it the head item?
this._hc = false;   //has the child item?
this._ls = false;    //has sibling item?
this._io = false;    //whether the panelbar is open?
};

//menu object
function PhenMenu(objName) {

this.config = {

closeSameLevel : true

   };
   //alert("asdsdf");
   this.obj = objName;

   this.items = [];

   this.root = new PhenItem(-1);

};

//add a new item to the item array
PhenMenu.prototype.add = function(id,pid,label,url,type,img,over,img2,over2,title,target){
this.items[this.items.length] = new PhenItem(id,pid,label,url,type,img,over,img2,over2,title,target);
};

// Outputs the menu to the page
PhenMenu.prototype.toString = function() {
//alert("arrived here");
var str = '<div>\n';

if (document.getElementById) {

str += this.addItem(this.root);

} else str += 'Browser not supported.';

   str += '\n</div>';
//alert(str);
   //document.write(str);
   //alert(this.items[0]._hc);
   return str;

};

// Creates the menu structure
PhenMenu.prototype.addItem = function(pItem) {

var str = '';

//var n=0;

   for (var n=0; n<this.items.length; n++) {

       if(this.items[n].pid == pItem.id){

           var ci = this.items[n];
           //alert(ci.pid);
           //alert(ci.id);
           this.setHS(ci);
           //alert("item:"+ci._hc);
           //alert(ci._ls);
           str += this.itemCreate(ci, n);

           if(ci._ls) break;

       }

}

return str;

};

// Creates the node icon, url and text
PhenMenu.prototype.itemCreate = function(pItem, itemId) {
//alert(pItem.type.toLowerCase());
   var str = '';

if(pItem.type == 'header')
     str = '<table width="100%" class="header" valign="middle" onmouseover="this.className=\'headerSelected\'" onmouseout="this.className=\'header\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

else
str = '<table width="100%" class="item" valign="middle" onmouseover="this.className=\'itemOver\'" onmouseout="this.className=\'item\'" onclick="'+this.obj+'.o('+itemId+')"><tr><td>';

if (pItem.img) {

str += ' <img id="i' + this.obj + itemId + '" src="' + pItem.img + '" alt="" />';

   }
   if (pItem.url) {
       str += '<a id="s' + this.obj + itemId + '" class="navigation_item" href="' + pItem.url + '"';
       if (pItem.title) str += ' title="' + pItem.title + '"';
       if (pItem.target) str += ' target="' + pItem.target + '"';
       str += ' onmouseover="window.status=\'' + pItem.label + '\';return true;" onmouseout="window.status=\'\';return true;"';
       str += '>';
   }
   str += '   ' + pItem.label;
   if (pItem.url) str += '</a>';
   str += '</td></tr></table>';
   //alert(pItem.url);
   //alert(str);
   if (pItem._hc) {
       str += '<table id="ct' + this.obj + itemId + '" width="100%" style="display:' + ((pItem._io) ? 'block' : 'none') + '; FILTER: blendTrans(Duration=3.0); VISIBILITY: hidden"><tr><td>';
       str += this.addItem(pItem);
       str += '</td></tr></table>';
       //alert(str);
       //document.write(str);
   }

return str;
};

// Checks whether a item has child and if it is the last sibling
PhenMenu.prototype.setHS = function(pItem) {

var lastId;

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id) pItem._hc = true;

if (this.items[n].pid == pItem.pid) lastId = this.items[n].id;

}

if (lastId==pItem.id) pItem._ls = true;

};

// Toggle Open or close
PhenMenu.prototype.o = function(id) {
   //alert(this.items.length);
   var ci = this.items[id];
//alert(ci);
   //this.setHS(ci);
   //alert(this.items[id]._hc);
   this.itemStatus(!ci._io, id);

ci._io = !ci._io;

if (this.config.closeSameLevel) this.closeLevel(ci);

};

// Change the status of a item(open or closed)
PhenMenu.prototype.itemStatus = function(status, id) {

cTable = document.getElementById('ct' + this.obj + id);

   if(status){

       cTable.filters.item(0).Apply();
       cTable.style.display = 'block';
       cTable.style.visibility = "";
       cTable.filters.item(0).Play();
   }
   else
       cTable.style.display = 'none';

   //cDiv.style.display = (status) ? 'block': 'none';

};

// Closes all items on the same level as certain item
PhenMenu.prototype.closeLevel = function(pItem) {
          //alert(this.items[0]._hc);
   for (var n=0; n<this.items.length; n++) {
        //alert(this.items[n]._hc);
       if ((this.items[n].pid == pItem.pid) && (this.items[n].id != pItem.id) && this.items[n]._hc) {

           this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};

PhenMenu.prototype.closeAllChildren = function(pItem) {

for (var n=0; n<this.items.length; n++) {

if (this.items[n].pid == pItem.id && this.items[n]._hc) {

if (this.items[n]._io) this.itemStatus(false, n);

this.items[n]._io = false;

this.closeAllChildren(this.items[n]);

}

};
</script>
<style>
.header {
   height:25px;
   FONT-FAMILY: Arial,Verdana;
   background-image:url(images/sideNavCategoryBg.gif);
   font-size:11px;
   color: #666666;

}
.headerSelected {
   height:25px;
   FONT-FAMILY: Arial,Verdana;
   background-image:url(images/sideNavCategorySelectedBg.gif);
   font-size:11px;
   background-repeat:repeat-x;
   COLOR: #333333;
   CURSOR: pointer;
}

.navigation_item {
   PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: none
}
.item {
PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px;
}
.itemOver {
   PADDING-LEFT: 2px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #333333; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; font-weight:bold; background-color:#EDEDED
}
.itemSelected {
   PADDING-LEFT: 20px; FONT-SIZE: 11px; CURSOR: pointer; COLOR: #000000; FONT-FAMILY: Arial,Verdana; HEIGHT: 20px; TEXT-DECORATION: underline;
}

A.headerSelected {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND-IMAGE: none; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 10px
}
</style>
</head>
<body>
<table width="221" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<p>Phenix panelbar</p>

       p = new PhenMenu('p');
    //alert("asds");
       p.add(0,-1,'label1凤凰','','header','[img]http://www.telerik.com/images/ProductImages//e.gif[/img]');
       p.add(1,0,'label1.1凤凰','[url]www.sina.com.cn[/url]');
       p.add(2,0,'label1.2','[url]www.sina.com.cn[/url]');
       p.add(3,0,'label1.3','[url]www.sina.com.cn[/url]');
       p.add(4,0,'label1.4','[url]www.sina.com.cn[/url]');

       p.add(5,-1,'label2','','header','[img]http://www.telerik.com/images/ProductImages//c.gif[/img]');
       p.add(6,5,'label2.1','[url]www.seu.edu.cn[/url]');
       p.add(7,5,'label2.2','[url]www.seu.edu.cn[/url]');
       p.add(8,5,'label2.3','[url]www.seu.edu.cn[/url]');
       p.add(9,5,'label2.4','[url]www.seu.edu.cn[/url]');

       p.add(10,-1,'label3','','header','[img]http://www.telerik.com/images/ProductImages//m.gif[/img]');
       p.add(11,10,'label3.1','[url]www.seu.edu.cn[/url]');
       p.add(12,10,'label3.2','[url]www.seu.edu.cn[/url]');
       p.add(13,10,'label3.3','[url]www.seu.edu.cn[/url]');
       p.add(14,10,'label3.4','[url]www.seu.edu.cn[/url]');

       p.add(15,-1,'label4','','header','[img]http://www.telerik.com/images/ProductImages//r.gif[/img]');
       p.add(16,15,'label4.1','[url]www.seu.edu.cn[/url]');
       p.add(17,15,'label4.2','[url]www.seu.edu.cn[/url]');
       p.add(18,15,'label4.3','[url]www.seu.edu.cn[/url]');
       p.add(19,15,'label4.4','[url]www.seu.edu.cn[/url]');
    //alert(p.items.length)
       document.write(p);

       //p.toString();
    //alert(p.items.length);
       //delete(p);
   </script>    </td>
</tr>
</table>
</body>
</html>

五十一没有控制拦的REALL播放器

CODE:

五十二荧光效果

CODE:

.荧光效果

function SymError()
{
return true;
}

window.onerror = SymError;

//-->
</script>

function textPulseDown()
{
if (!document.all)
return
if (i > from)
{
theText.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
i--;
theTimeout = setTimeout('textPulseDown()',delay);
return 0;
}

if (i = from)
{
theTimeout = setTimeout('textPulseUp()',delay);
return 0;
}
}

//-->
</script>

五十三滚动效果

CODE:

<div id="adsfar">
<table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr>
    <td bgcolor="#FFFFFF">1</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">2</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">3</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">4</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">5</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">6</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">7</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">8</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">9</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">10</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">11</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">12</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">13</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">14</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">15</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">16</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">17</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">18</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">19</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">20</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">21</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">22</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">23</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">24</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">25</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">26</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">27</td>
</tr>
<tr>
    <td bgcolor="#FFFFFF">28</td>
</tr>
</table>
</div>
<script type="text/javascript">
marque(320,196,"icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){
   try{
    marqueesHeight = height;
    stopscroll   = false;

    scrollElem = document.getElementById("adsfar");
    with(scrollElem){
       style.width   = width;
       style.height   = marqueesHeight;
       style.overflow = 'hidden';
       noWrap       = true;
    }

scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');

    preTop   = 0;
    currentTop = 0;
    stoptime   = 0;

    leftElem = document.getElementById("adsfar");
    scrollElem.appendChild(leftElem.cloneNode(true));

    init_srolltext();

}catch(e) {}
}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 18);
}

function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == marqueesHeight+1) {
stoptime += 1;
currentTop -= 1;
if(stoptime == (marqueesHeight)*1) {//停顿时间
currentTop = 0;
stoptime = 0;
}
}else{

preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = marqueesHeight;
scrollElem.scrollTop += 1;
}
}
}
</Script>

五十四在网页中弹出其它的窗口

CODE:
[quote]<script>

var tmp=window.open("[url]http://www.cawen.com/bbs[/url]","",

"fullscreen=1")

tm　
p.moveTo(100,100)

tmp.resizeTo(600,400)

tmp.focus()

tmp.location="卡文校园网"

</script>[/quote]

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1378846

posted on 2007-03-22 13:09 赵贵阳阅读(606) 评论(0) 编辑收藏所属分类: JavaScript

JK.D.Roger

JavaScript经典效果集

导航

常用链接

留言簿(2)

随笔分类

随笔档案

相册

常用java收藏

搜索

最新评论

阅读排行榜

评论排行榜