JavaScript 经典效果集收集2

十六图片之间的切换

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

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

提示：您可以先修改部分代码再运行

十七 DIV_圆边圆角的实现

提示：您可以先修改部分代码再运行

十八跳动的菜单

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

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

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

提示：您可以先修改部分代码再运行

十九通过页面抓取照片

<!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> &nbsp; 
<TABLE id=Table1 style="POSITION: static" borderColor=#cccccc cellSpacing=0 
cellPadding=0 width=500 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD style="LINE-HEIGHT: 1.5em; HEIGHT: 35px" borderColor=#ffffff 
background=te.files/titledown.gif colSpan=2><FONT face=宋体></FONT></TD></TR>
<TR>
<TD 
style="PADDING-LEFT: 15px; COLOR: #660033; LINE-HEIGHT: 1.5em; PADDING-TOP: 10px" 
vAlign=top borderColor=#ffffff align=left 
background=te.files/bg1.gif><FONT face=宋体>友善提醒：<BR>1、如果别的程 
序（如qq）或者其他网页正在使用摄像头,请先关闭相关程序，否则本</FONT><FONT 
face=宋体>网页对摄像头的功能不能使用。<BR>2、本网页必须使用一个插件ezvidc60.ocx，如果你未安装，请<A 
href="http://nnyc.vicp.net:4099/schoolstation/source/ezvid.rar">下载安装</A>,(把下载的文件ezvid.rar解压到一个目录后，双击执行ezvid.bat即可)。如果您认为这会威胁到您计算机的安全，请关闭本页。</FONT></FONT></TD>
<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>

提示：您可以先修改部分代码再运行

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

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

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

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

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

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

// method
// DHTMLpagenation(strContent,perpageLength)

DHTMLpagenation(s,100);

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

提示：您可以先修改部分代码再运行

<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;'>&lt;$2&gt;</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 相关报道 &raquo;哈马斯已有总理人选 
                解放日报报业集团 - 所有 489 相关报道 &raquo;陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 &raquo;</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>

提示：您可以先修改部分代码再运行

二十二漂亮的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>&nbsp;</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>

提示：您可以先修改部分代码再运行

二十三经典的带阴影的可拖动的浮动层--转贴自网友:marvellous

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

提示：您可以先修改部分代码再运行

运行代码的代码：

提示：您可以先修改部分代码再运行

凹陷文字

提示：您可以先修改部分代码再运行

Browser-width defined font size
自定义容器和字体大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>

</div>
	</div>

</body>

</html>

提示：您可以先修改部分代码再运行

超级REAL视频播放器：

提示：您可以先修改部分代码再运行

JS CTRL+ENTER 提交

提示：您可以先修改部分代码再运行

accesskey 提交

提示：您可以先修改部分代码再运行

对于快捷键的使用IE：ALT+快捷键

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新闻切换技术</title>
<style 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(http://tech.163.com/newimg/adpic.gif);}
.focusPic .adPic .text{float:right; padding:9px 4px 0 0; width:140px;}
.focusPic .adPic .text a{color:#1f3a87;}
.focusPic .adPic .text a:hover{color:#bc2931;}
.focusPic h2{ float:left; width:232px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:226px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px;}
.focusPic p img {margin:0px 0 2px;}
.focusPic .more{ margin:0 auto; width:240px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://tech.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://tech.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://tech.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://tech.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}

-->
</style>
</head>

<body>
 <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="http://tech.163.com/special/000915SN/soft2005.html"><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="网易学院05年软件评选结果" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/000915SN/soft2005.html">网易学院05年软件评选结果</a></h2>
 <p>经过大家的热情投票和我们的辛劳整理，网易学院2005年年度软件评选结果终于出炉啦。点击进入查看……<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/000915SN/soft2005.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic2" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/discover/"><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="颠覆丛林动物生存法则" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/discover/">颠覆丛林动物生存法则</a></h2>
 <p>群居动物的这种行为颠覆了我们通常认为的，在动物世界通行的 “丛林法则”，动物不都自私，不都是弱肉强食的。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/discover/" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic3" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html"><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非贸易阴谋" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091MNJ/itobserve015.html">WAPI并非贸易阴谋</a></h2>
 <p>近日国家做出决定：“将向其他的国内及国外企业公布该算法”。事实证明中国WAPI标准并非是贸易阴谋。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091MNJ/itobserve015.html" class="cDRed">详细</a></p>
 </div>
 <div id="focusPic4" style="display: none ;">
 <div class="pic"> <a href="http://tech.163.com/special/00091OSI/horizons.html"><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新视野号探测冥王星特别专题" width="240" height="180" border="0" /></a> </div>
 <h2><a href="http://tech.163.com/special/00091OSI/horizons.html">新视野号探测冥王星特别专题</a></h2>
 <p>美国宇航局将于北京时间18日凌晨2时24分发射新视野号探测器，造访这颗人类唯一尚未探测过的行星-冥王星。<img src="/newimg/i2.gif" alt="详细" width="3" height="5" /> <a href="http://tech.163.com/special/00091OSI/horizons.html" class="cDRed">详细</a></p>
 </div>
 <div class="more">
 <div class="textNum">
 <div class="text">&gt; 更多头图新闻</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>

提示：您可以先修改部分代码再运行

<!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(http://www.infowe.com/images/infowe.gif) 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('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', '');

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

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

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

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

addHdr('WELCOME TO');

addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank');

// and HERE! No more!

document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')

if (IE) {document.write('</DIV>')}

if (NS) {document.write('</LAYER>')}

if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}

</SCRIPT>

window.onload=init

</SCRIPT>
<p style="height:1000px;"></p>
</BODY></HTML>

提示：您可以先修改部分代码再运行

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>

提示：您可以先修改部分代码再运行

网易娱乐头图新闻代码

<title>51du.cn-代码演示专用页面</title>
<style type="text/css">
/* 全局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;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
a.cBlue:hover{color:#bc2931;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#c00;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}

/* 头图 */
.col{margin: 20 0 0 0;float:center; width:252px;border:1px solid #006BB6;}
.focusPic{margin:0 auto; width:252px;}
.focusPic .pic{margin:0 auto; width:250px; height:191px; padding:5px 0 0; background:url(http://cimg2.163.com/ent/newimg/focus3_bg.gif) no-repeat;}
.focusPic .pic img{margin:6px 0 0 0;}
.focusPic .pic h3 {text-align:left; padding:1px 0 0 12px;}
.focusPic .pic h3 img {margin:0px; }

.focusPic .pic .flashBlank {margin:0 auto; width:100%; height:6px; font-size:1px; }
.focusPic .pic h5 {text-align:left; padding:0px 0 0 12px !important;padding:5px 0 0 12px;}
.focusPic .pic h5 img {margin:0px; }

.focusPic h2{ float:left; width:236px;padding:4px 0 3px 12px; font-size:14px; text-align:left;}
.focusPic p{float:left; width:236px;line-height:160%; margin:0; text-align:left;padding:0 0 10px 12px; height:57px;}
.focusPic .more{ margin:0 auto; width:250px; }
.focusPic .more .textNum{float:right; margin:0 8px 0 0;padding:0 0 4px;}
.focusPic .more .textNum .text{float:left; font-weight:bold; padding:7px 6px 0 0; color:#666;}
.focusPic .more .textNum .num{float:left; width:113px; height:19px;}
.focusPic .more .textNum .bg1{ background:url(http://ent.163.com/newimg/num1.gif);}
.focusPic .more .textNum .bg2{ background:url(http://ent.163.com/newimg/num2.gif);}
.focusPic .more .textNum .bg3{ background:url(http://ent.163.com/newimg/num3.gif);}
.focusPic .more .textNum .bg4{ background:url(http://ent.163.com/newimg/num4.gif);}
.focusPic .more .textNum .num ul{ float:left; width:113px;}
.focusPic .more .textNum .num li{float:left; width:28px; font-weight:bold;display:block; color:#fff; list-style-type:none; padding:6px 0 0;}
.focusPic .more .textNum .num li a{color:#fff; padding:0 5px; }
.focusPic .more .textNum .num li a:visited{color:#fff;}
.focusPic .more .textNum .num li a:hover{color:#ff0;}
</style>
<div class="col">

<script language="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="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html"><img src="http://cimg2.163.com/ent/2006/4/10/200604100850175803c.jpg" alt="章子怡黑衣蒙头上吴彦祖保姆车" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html">章子怡黑衣蒙头上吴彦祖保姆车</a></h2>
<p>　　章子怡日前和霍启山闹分手，前晚(4月8日)在香港又被媒体跟拍到她和吴彦祖一起玩乐、还一上车就遮遮掩掩 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/07/2EB5MT7000031H2L.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic2" style="display: none;">
        <div class="pic"> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html"><img src="http://cimg2.163.com/ent/2006/4/10/2006041016571088ffc.jpg" alt="刘晓庆重演武则天造型曝光" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html">刘晓庆重演武则天造型曝光</a></h2>
<p>　　《日月凌空》正紧张拍摄,刘晓庆再次扮演武则天,记者通过特殊渠道获得了两张被称为剧组顶级机密的造型照。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://ent.163.com/06/0410/13/2EBQ6RK000031NKO.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic3" style="display: none;">
        <div class="pic"> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html"><img src="http://cimg2.163.com/ent/2006/4/7/20060407101802517a6.jpg" alt="赢飞利浦768手机" width="228" height="150" border="0" /></a> 
<h3><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h3>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html">赢飞利浦768手机</a></h2>
<p>　　参加飞利浦手机娱乐关键字专题活动，赢取飞利浦768手机，活动正火热进行中 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=55136&AdID=57068&TargetID=515&Values=31,43,51,60,72,78,81,90,100,110,312,330,332,364,582,733,734&Redirect=http://ent.163.com/special/00031SST/FQ.html" class="cDRed">详细</a></p>
</div>
<div id="focusPic4" style="display: none;">
        <div class="pic"><div class="clear flashBlank">　</div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="228" height="150">
<param name="movie" value="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" />
<param name="quality" value="high" />
<embed src="http://cimg3.163.com/ent/2006/0403/pepsi228150.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="228" height="150"></embed>
</object> 
<h5><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54129&AdID=56109&TargetID=515&Values=31
,43,51,60,72,78,85,91,100,110,312,330,332,364,594,702,733,734&Redirect=http://http://www.eiser.net/j_163_enter_spo1.htm"><img src="http://cimg2.163.com/ent/newimg/focus2_sony.gif" width="104" height="21" alt="" /></a></h5>
        </div>
<h2><a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/">中国无名小子挑战球星贝克汉姆</a></h2>
<p>　　两个中国无名小子将会亲身与贝克汉姆、罗纳尔迪尼奥、亨利等世界顶级球星面对面。 <img src="http://cimg2.163.com/ent/newimg/i4.gif" alt="详细" width="3" height="13" /> <a href="http://adclient.163.com/event.ng/Type=click&FlightID=54561&AdID=56510&TargetID=515&Values=31,43,51,60,72,78,84,91,100,110,312,330,332,364,586,702,733,734&Redirect=http://pepsi.163.com/" class="cDRed">详细</a></p>
</div>
<div class="more">
<div class="textNum">
<div class="text">&gt; 更多头图新闻</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>
<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>

提示：您可以先修改部分代码再运行

制作特殊字的脚本

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

<body text=#00ff00 bgColor=black  onload=e(d.q)>
<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?"&nbsp;":"　";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. 请输入字母: &nbsp; &nbsp;<INPUT class=g  value=chenxi><BR><BR>2. 请选择一种字符: <INPUT class=g size=5 value=■><BR><BR>3. 
Generate ASCII: 
&nbsp;&nbsp;<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 &amp; 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>

提示：您可以先修改部分代码再运行

CSS模仿IE警告信息栏

/* 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(http://www.51du.cn/img/warning.gif) 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(http://www.51du.cn/img/warning2.gif) 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="http://www.51du.cn/">欢迎访问独来读网的BLOG</a></div>
</body>
</html>

提示：您可以先修改部分代码再运行

文字幻灯片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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='http://www.51du.cn' target='_blank' class='cr4'>班级留言“说”出口，校友录开通语音留言服务</a>",
	"<a href='http://www.51du.cn' class='cr4'>星级会员新体验,享受无广告的清新校友录</a>",
	"<a href='http://www.51du.cn' target='_blank' class='cr4'>星级会员免费多彩留言,表情,贴图,个性无限...</a>",
	"<a href='http://www.51du.cn' target='_blank' class='cr4'>星级会员免费留言下载,导出更多昔日记忆</a>",
	"<a href='http://www.51du.cn' 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 效果.借花献佛.

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

提示：您可以先修改部分代码再运行

文字滚动

提示：您可以先修改部分代码再运行

可拖动窗口，附带鼠标控制渐变透明，开启关闭功能

提示：您可以先修改部分代码再运行

繁简体文字转换工具

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

提示：您可以先修改部分代码再运行

向上滚动

提示：您可以先修改部分代码再运行

向下滚动

提示：您可以先修改部分代码再运行

向左滚动

<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="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" 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>

提示：您可以先修改部分代码再运行

向右滚动

<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="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
			  <td><img src="http://www.haao.cn/logo.gif" width="88"></td>
              <td><img src="http://www.haao.cn/logo.gif" 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代码

提示：您可以先修改部分代码再运行

posted @ 2007-02-04 13:32 海浪~~ 阅读(1908) 评论(0) 收藏举报

刷新页面返回顶部

海浪

JavaScript 经典效果集收集2

公告