博客列举了多种前端页面效果及工具代码，包括弹出提示、跳动菜单、浮动层、仿flash菜单等效果，还有网易娱乐头图新闻代码、美化列表、loading效果等，另外有繁简体文字转换工具以及HTML转JS代码功能。
14.弹出提示的效果
15.跳动的菜单
16.带阴影的可拖动的浮动层
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;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position) allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];
} }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT += parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop) +parentT)+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol) {
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
function loadwin(obj){
with(MM_findObj(obj))with(style){
filters[0].apply();
display='';
filters[0].play();
}
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
with(oldBody){
var newBody=cloneNode();
style.filter='blendtrans(duration=1)';
filters[0].apply();
with(document.styleSheets[0]){
with(rules[0].style){backgroundColor=captionBG;}
with(rules[1].style){backgroundColor=bodyBG;}
with(rules[2].style){backgroundColor=tableBG}
}
filters[0].play();
setTimeout(function(){
if(oldBody!=null){
oldBody.applyElement(newBody, "inside")
oldBody.swapNode(newBody);
oldBody.removeNode(true);
}
},1500);
}
}
//-->
</script>
<style type="text/css">
<!--
.caption {
font-size: 9px;
color: #FFFFFF;
background-color: #00CCFF;
padding-left: 5px;
cursor: default;
font-family: "Verdana", "Arial";
border: 1px inset;
}
body {
background-color: #f6f6f6;
border: 1px inset;
overflow: hidden;
}
table {
background-color: #eeeeee;
}
td {
font-family: "Verdana", "Arial";
font-size: 9px;
border: 0px;
}
.win {
filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3) alpha(opacity=90)
}
a {
text-decoration: none;
color: #003399;
}
a:hover {
color: #FF0000;
}
input {
font-family: "Verdana", "Arial";
font-size: 9px;
border-width: 1px;
}
.statusbar {
font-family: "Tahoma", "Verdana";
font-size: 9px;
color: #999999;
padding-left: 3px;
}
.button {
border: 1px outset;
text-align: center;
}
.navframe {
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px; z-index:1;display:none;" class="win" onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
<table width="180" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="caption">SeekAssist</td>
<td width="14" align="center"><a href="#" onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
<td width="14" align="center"><a href="#" onClick="MM_showHideLayers('assist','','hide')">X</a></td>
</tr>
<tr id="assistwin">
<td height="100" colspan="3" bordercolor="#eeeeee"> </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="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>
17.漂亮的仿flash菜单
Code
<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>
<script>
/*
http://lexrus.blueidea.com
这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
var tds=objid.getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
with(tds[i]){
onmouseover=function(){
with(this){
filters[0].apply();
style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
style.border='1px solid #ffffff'; //边框
style.color='black'; //文字颜色
filters[0].play();
}
}
onmouseout=function(){
with(this){
filters[0].apply();
style.background='#336699'; //这是鼠标离开时的背景颜色
style.border='1px solid #336699'; //边框
style.color='#ffffff'; //文字颜色
filters[0].play();
}
}
}
}
}
</script>
<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<tr>
<td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>
<td>Name</td>
<td>Is</td>
<td>LeX</td>
<td>Rus</td>
<td>!!!</td>
</tr>
</table>
<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是那个table的id</script>
<br><br><br><br>
<!--下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0" bgcolor="#336699" align="center">
<tr><td>My</td></tr>
<tr><td>Name</td></tr>
<tr><td>Is</td></tr>
<tr><td>LeX</td></tr>
<tr><td>Rus</td></tr>
<tr><td>!!!</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>
18.网易娱乐头图新闻代码
Code
<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">> 更多头图新闻</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>
19.美化列表
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> simulate combox control - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body, input
{
font-family: verdana;
font-size: 9pt;
}
h1
{
font-family: tahoma;
font-size: 22pt;
text-align: left;
}
pre
{
font-size: 9pt;
font-family: verdana;
border: 1px solid #006600;
width: 400px;
padding: 10px;
background: #ffffff;
color: #006600;
}
.CtlSelect
{
border: 1px solid #006600;
font-family: verdana;
height: 20px;
color: #006600;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected
{
background: #006600;
color: #ffffff;
height: 20px;
}
.unselected
{
height: 20px;
color: #006600;
line-height: 120%;
border-bottom: 1px solid #006600;
}
.CtlSelect1
{
border: 1px solid #003399;
font-family: verdana;
height: 20px;
color: #003399;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected1
{
background: #003399;
color: #ffffff;
height: 20px;
}
.unselected1
{
height: 20px;
color: #003399;
line-height: 120%;
border-bottom: 1px solid #003399;
}
.CtlSelect2
{
border: 1px solid #990000;
font-family: verdana;
height: 20px;
color: #990000;
background: #ffffff;
/*background:url({E5066804-650D-4757-9BA4-A92DB8817A18}0.jpg);*/
}
.selected2
{
background: #990000;
color: #ffffff;
height: 20px;
}
.unselected2
{
height: 20px;
color: #990000;
line-height: 120%;
border-bottom: 1px solid #990000;
}
.copyright
{
margin-top: 10px;
font-size: 9pt;
text-align: center;
color: #333;
font-weight: bold;
}
</style>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
//-------------------------------------------------------------
// @ Module: simulate select control, IE only.
// @ Debug in: IE 6.0
// @ Script by: blueDestiny, never-online
// @ Updated: 2006-3-22
// @ Version: 1.0 apha
// @ Email: blueDestiny [at] 126.com
// @ Website: http://www.never-online.net
// @ Please Hold this item please.
//
// API
// @ class: simulateSelect()
//
// @ object.style(ctlStyle[,selStyle][,unselStyle])
// ctlStyle: main control combox css class name
// selStyle: when mouseover or option focus css class name
// unselStyle: options blur's css class name
//
// @ object.width=(widthPX)
// widthPX must be a digit number.
//
// @ object.height=(heightPX)
// heightPX must be a digit number.
//
// @ object.getValue(ctlSelID)
// ctlSelID is the unique select control ID
//
// -------------- for the next Version ----------
// @ object.readOnly = (blnReadOnly)
// blnReadOnly must be a boolean type or a number type.
// @ object.addEvent(w, h)
// w: fire handler's event.
// h: handler function.
//-------------------------------------------------------------
function $(objID)
{
return document.getElementById(objID);
};
function Offset(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
return {
top : t,
left : l,
width : w,
height : h
}
}
//-----------------------------------------------
function simulateSelect() { with(this)
{
this.IDs = [];
this.name = this;
// property for beta Version
// can editable combox
this.readonly = true;
this.height = 20;
this.width = null;
this.ctlStyle = "CtlSelect";
this.selStyle = "selected";
this.unselStyle = "unselected";
this.elementPrefix = "e__";
this.inputPrefix = "i__";
this.containerPrefix = "c__";
this.buttonPrefix = "b__";
return this;
}};
simulateSelect.prototype.init = function(ctlSelIDs) { with(this)
{
eval(name).append(ctlSelIDs);
eval(name).simulates();
}};
simulateSelect.prototype.style = function() { with(this)
{
ctlStyle = arguments[0];
selStyle = arguments[1];
unselStyle = arguments[2];
}};
//-----------------------------------------------
simulateSelect.prototype.append = function(ctlSelIDs) { with(this)
{
if( ctlSelIDs.indexOf(",")>0 )
{
var arrCtlSel = ctlSelIDs.split(",");
for(var i=0; i<arrCtlSel.length; i++)
{
eval(name).IDs.push(arrCtlSel[i]);
}
}
else
{
eval(name).IDs.push(ctlSelIDs);
}
}};
simulateSelect.prototype.checkupOnMouseDown = function(e) { with(this)
{
// here compatible mf.
var el = e ? e.srcElement : e.target;
if( el.id.indexOf(elementPrefix)>-1 ||
el.id.indexOf(inputPrefix)>-1 ||
el.id.indexOf(containerPrefix)>-1 ||
el.id.indexOf(buttonPrefix)>-1 )
{
return;
}
else
{
for(var i=0; i<eval(name).IDs.length; i++)
if( $(containerPrefix + IDs[i]) )
$(containerPrefix + eval(name).IDs[i]).style.display = "none";
}
}};
simulateSelect.prototype.simulates = function() { with(this)
{
for(var i=0; i<IDs.length; i++)
eval(name).simulate(IDs[i]);
}};
simulateSelect.prototype.simulate = function(ctlSelID) { with (this)
{
var input;
var button;
var object;
var offset;
object = $(ctlSelID);
offset = Offset(object);
input = document.createElement("INPUT");
button = document.createElement("BUTTON");
button.setAttribute("id", buttonPrefix + ctlSelID);
//button.value = "⊿";
button.value = "6";
button.style.fontFamily = "Webdings, Marlett";
button.style.background = "";
button.onclick = input.onclick = function()
{
this.blur();
eval(name).expand(ctlSelID, offset);
}
input.onselectstart = function() { eval(name).expand(ctlSelID, offset); event.returnValue = false; };
input.setAttribute("id", inputPrefix + ctlSelID);
input.title = button.title = "click expand options";
input.style.cursor = button.style.cursor = "default";
input.className = button.className = ctlStyle;
input.style.width = (width>0 ? width : object.offsetWidth);
height ? input.style.height=button.style.height=height : "";
input.value = object[0].text;
if( readonly==true ) input.readOnly=true;
// this method is only IE.
object.insertAdjacentElement("afterEnd",button);
object.insertAdjacentElement("afterEnd",input);
object.style.display = 'none';
}};
simulateSelect.prototype.expand = function(ctlSelID, offset) { with(this)
{
var div, btn_off;
var object = $(ctlSelID);
if( !$(containerPrefix + ctlSelID) )
{
div = document.createElement("DIV");
div.style.position = "absolute";
div.style.display = "block";
div.setAttribute("id", containerPrefix + ctlSelID);
div.className = ctlStyle;
div.style.left = offset.left;
div.style.top = offset.top + offset.height;
div.style.width = (width ? width : offset.width) + 20;
div.style.height = offset.height;
document.body.appendChild(div);
for(var i=0; i<object.length; i++)
{
div = document.createElement("DIV");
div.setAttribute("id", div.id = elementPrefix + ctlSelID + i);
div.style.cursor = "default";
if( object[i].text==$(inputPrefix + ctlSelID).value )
div.className = selStyle;
else
div.className = unselStyle;
div.innerText = div.title = object[i].text;
div.style.height = height;
div.setAttribute("value", object[i].value);
div.onmouseover = function()
{
for(var j=0; j<$(containerPrefix + ctlSelID).childNodes.length; j++)
{
if($(containerPrefix + ctlSelID).childNodes[j]==this)
$(containerPrefix + ctlSelID).childNodes[j].className = selStyle;
else
$(containerPrefix + ctlSelID).childNodes[j].className = unselStyle;
}
};
div.onclick = function()
{
$(inputPrefix + ctlSelID).value = this.innerText;
$(containerPrefix + ctlSelID).style.display = "none";
};
$(containerPrefix + ctlSelID).appendChild(div);
}
return;
}
if( $(containerPrefix + ctlSelID).style.display=="none" )
{
for(var i=0; i<object.length; i++)
{
if( object[i].text==$(inputPrefix + ctlSelID).value )
$(elementPrefix + ctlSelID + i).className = selStyle;
else
$(elementPrefix + ctlSelID + i).className = unselStyle;
}
$(containerPrefix + ctlSelID).style.display="block";
return;
}
if( $(containerPrefix + ctlSelID).style.display=="block" )
{
$(containerPrefix + ctlSelID).style.display="none";
return;
}
}};
simulateSelect.prototype.getValue = function(ctlSelID) { with(this)
{
if( $(inputPrefix + ctlSelID) )
return $(inputPrefix + ctlSelID).value;
else
return null;
}};
simulateSelect.prototype.addEvent = function(w, h) { with(this)
{
}};
//-----------------------------------------------
//window.onerror = Function("return true;");
// IE only.
document.attachEvent("onmousedown", function() {
a.checkupOnMouseDown(event);
b.checkupOnMouseDown(event);
c.checkupOnMouseDown(event)
}
);
//-->
</SCRIPT>
<h1> simulate combox control </h1>
<h4> demonstrate </h4>
<p>
<select id="s0">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
<option value="4">option4</option>
<option value="5">option5</option>
</select>
</p>
<p>
<select id="s1">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">1option1</option>
<option value="2">1option2</option>
<option value="3">1option3</option>
<option value="4">1option4</option>
<option value="5">1option5</option>
</select>
</p>
<p>
<select id="s2">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">2option1</option>
<option value="2">2option2</option>
<option value="3">2option3</option>
<option value="4">2option4</option>
<option value="5">2option5</option>
</select>
</p>
<p>
<select id="s3">
<option value="- please select your options -"> - please select your options -</option>
<option value="1">3option1</option>
<option value="2">3option2</option>
<option value="3">3option3</option>
<option value="4">3option4</option>
<option value="5">3option5</option>
</select>
</p>
<button onclick="alert(a.getValue('s1') + '\n\n' + b.getValue('s2'))" class="CtlSelect"> Get value </button>
<SCRIPT LANGUAGE="JavaScript">
<!--
var a = new simulateSelect();
a.style("CtlSelect", "selected", "unselected");
a.init("s1");
var b = new simulateSelect();
b.style("CtlSelect1", "selected1", "unselected1");
b.width = 300;
b.init("s2");
var c = new simulateSelect();
c.style("CtlSelect2", "selected2", "unselected2");
c.width = 320;
c.init("s3");
//-->
</SCRIPT>
<h4> description </h4>
<pre>
//-------------------------------------------------------------
// @ Module: simulate select control, IE only.
// @ Debug in: IE 6.0
// @ Script by: blueDestiny, never-online
// @ Updated: 2006-3-22
// @ Version: 1.0 apha
// @ Email: blueDestiny [at] 126.com
// @ Website: http://www.never-online.net
// @ Please Hold this item please.
//
// API
// @ simulateSelect(ctlSelIDs)
// ctlSelIDs: select control IDs, split by ","
//
// @ simulateSelect.style(ctlStyle[,selStyle][,unselStyle])
// ctlStyle: main control combox css class name
// selStyle: when mouseover or option focus css class name
// unselStyle: options blur's css class name
//
// @ simulateSelect.width=(widthPX)
// widthPX must be a digit number.
//
// @ simulateSelect.height=(heightPX)
// heightPX must be a digit number.
//
// -------------- for the next Version ----------
// @ simulateSelect.readOnly = (blnReadOnly)
// blnReadOnly must be a boolean type or a number type.
// @ simulateSelect.addEvent(w, h)
// w: fire handler's event.
// h: handler function.
//-------------------------------------------------------------
</pre>
<div class="copyright">
Power By blueDestiny, never-online
http://www.never-online.net
</div>
</BODY>
</HTML>
20.loading 效果
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
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>
<INPUT TYPE="BUTTON" VALUE="Click Me!" onclick="startLongProcess();">
<!-- BEGIN PROGRESS DIALOG -->
<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>
<!-- END PROGRESS DIALOG -->
<!-- BEGIN FAKE MODAL 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>
<!-- END FAKE MODAL DIV -->
</body>
</html>
21.繁简体文字转换工具
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>
22.将HTML自动转为JS代码
Code
<script>
function toScript(val)
{
var value = val.value
value = value.replace(/\\/gi,"\\\\").replace(/"/gi,"\\\"").replace(/'/gi,"\\\'")
valArr = value.split("\r\n")
value=""
for (i=0; i<valArr.length; i++)
{
value += (i==0) ? "info =" : ""
value += " \"" + valArr[i]
value += (i!=valArr.length-1) ? "\" +\"\\n\"+\n" : "\"\n"
}
value+="\ndocument.write(info)"
val.value = value
}
</script>
<input type=button value="将 HTML 转为 JavaScript" onclick=toScript(document.all["code"])><br>
<textarea id=code cols=75 rows=20>
<table width="300">
<tr><td align="right">A</td></tr>
</table></textarea>
23.菜单效果2
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Phenix PanelBar</title>
<script language="javascript">
/*--------------------------------------------------|
| Phenix PanelBar | www.seu.edu.cn |
|---------------------------------------------------|
| |
| 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" οnmοuseοver="this.className=\'headerSelected\'" οnmοuseοut="this.className=\'header\'" οnclick="'+this.obj+'.o('+itemId+')"><tr><td>';
else
str = '<table width="100%" class="item" valign="middle" οnmοuseοver="this.className=\'itemOver\'" οnmοuseοut="this.className=\'item\'" οnclick="'+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 += ' οnmοuseοver="window.status=\'' + pItem.label + '\';return true;" οnmοuseοut="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>
<script type="text/javascript">
p = new PhenMenu('p');
//alert("asds");
p.add(0,-1,'label1凤凰','','header','http://www.telerik.com/images/ProductImages//e.gif');
p.add(1,0,'label1.1凤凰','www.sina.com.cn');
p.add(2,0,'label1.2','www.sina.com.cn');
p.add(3,0,'label1.3','www.sina.com.cn');
p.add(4,0,'label1.4','www.sina.com.cn');
p.add(5,-1,'label2','','header','http://www.telerik.com/images/ProductImages//c.gif');
p.add(6,5,'label2.1','www.seu.edu.cn');
p.add(7,5,'label2.2','www.seu.edu.cn');
p.add(8,5,'label2.3','www.seu.edu.cn');
p.add(9,5,'label2.4','www.seu.edu.cn');
p.add(10,-1,'label3','','header','http://www.telerik.com/images/ProductImages//m.gif');
p.add(11,10,'label3.1','www.seu.edu.cn');
p.add(12,10,'label3.2','www.seu.edu.cn');
p.add(13,10,'label3.3','www.seu.edu.cn');
p.add(14,10,'label3.4','www.seu.edu.cn');
p.add(15,-1,'label4','','header','http://www.telerik.com/images/ProductImages//r.gif');
p.add(16,15,'label4.1','www.seu.edu.cn');
p.add(17,15,'label4.2','www.seu.edu.cn');
p.add(18,15,'label4.3','www.seu.edu.cn');
p.add(19,15,'label4.4','www.seu.edu.cn');
//alert(p.items.length)
document.write(p);
//p.toString();
//alert(p.items.length);
//delete(p);
</script> </td>
</tr>
</table>
</body>
</html>
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="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>
Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>cao888---提示</title>
</head>
<body>
<script language=javascript>
var cao_x,cao_y;
function cao888()
{
this.display=display;
}
function display()
{
document.write("<table align=center><tr><td><button style='width:100px;height:30px;font-size:12px;border:1px solid #A4B3C8;background-color:green;' type=button οnclick=document.getElementById('cao1').style.display='block' οnfοcus=this.blur()>CAO留言</button></td></tr></table>");
document.write("<div id='cao1' style='font-size:12px;position:absolute;display:none;text-align:center;overflow:visible'>");
document.write("<div style='position:absolute;top:expression((body.clientHeight-300)/2);left:expression((body.clientWidth-200)/2);width:200px;height:180px;background-color:#dbdbdb;border:1px solid #cccccc;'>");
document.write("<table width=200 height=20 bgcolor=green οnmοusedοwn='cao_x=event.x-parentNode.style.pixelLeft;cao_y=event.y-parentNode.style.pixelTop;setCapture();' οnmοuseup='releaseCapture();' οnmοusemοve='caoMove(this.parentNode)' style='cursor:move;'>");
document.write("<tr align=center>");
document.write("<td align=left>提示:CAO888</td>");
document.write("</tr>");
document.write("</table>");
document.write("<span style= cursor:hand οnclick=this.parentNode.parentNode.style.display='none';><img src='http://pic1.blueidea.com/bbs/topic5.gif'><br>CAO呀,错误了
<br>[确定]</span>");document.write(" </div>");
document.write("</div>");
}
function caoMove(obj) //实现层的拖移
{
if(event.button==1)
{
var caoX=obj.clientLeft;
var caoY=obj.clientTop;
obj.style.pixelLeft=caoX+(event.x-cao_x);
obj.style.pixelTop=caoY+(event.y-cao_y);
}
}
</script>
<script language=javascript>
var mycao=new cao888();
mycao.display();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
