javascript等特效脚本代码集（26~37）
来源：互联网 发布：java风清扬 编辑：程序博客网 时间：2024/05/01 14:04
内容来自 梦之都网页设计师论坛http://www.dreamdu.com/bbs/index.php
26 跳动的菜单
<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>
27 圆边 圆角的div层
<html xmlns:v>
<head>
<style>
v/:*{behavior: url(#default#VML);}
</style>
</head>
<body>
<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#AAEAFA" Filled="T" />
</body>
28 图片之间的切换
<script language=JavaScript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var adNum=0;
var jumpUrl="http://sports.tom.com/";
imgLink[1]="http://sports.tom.com/gnzt/2005yg/";
imgLink[2]="http://sports.tom.com/zhty/";
imgUrl[1]="http://img.sports.tom.com/img/assets/200509/050927071818sportsgnzt200592701.jpg";
imgUrl[2]="http://img.sports.tom.com/img/assets/200509/050927075953zt20050926107.jpg";
var imgPre=new Array();
var j=0;
for (i=1;i<=imgUrl.length-1;i++) {
if(imgLink[i]!="") {j++;}
else {break;}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;
if( key==0 ){key=1;}
else if (document.all){
imgInit.filters.revealTrans.Transition=6;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
jumpUrl=imgLink[adNum];
theTimer=setTimeout("nextAd()", 7000);
}
function goUrl(){
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '') window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
//-->
</script>
<a href="javascript:goUrl()"><img style="FILTER:
revealTrans(duration=2,transition=6);border:1 solid black" src="javascript:nextAd()" width=300
border=0 name=imgInit height="210"></a>
</body>
</html>
29 漂亮的表格
<!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" _fcksavedurl=""styles.css"" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* CSS Document */
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">lipeng</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>
</body>
</html>
30 带阴影的可以拖动的浮动层div
<!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="#" _fcksavedurl=""#"" 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>
31 凹陷的文字
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.baidu.cn/">www.baidu.cn</a></font>
</div>
32 点击按钮实现运行代码的js代码
<script>
function Preview()
{
var TestWin=open('');
TestWin.document.write(code.value);
}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
33 漂亮的仿flash的菜单效果
<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>
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.baidu.cn/">www.baidu.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>
34 动态的改变网页字体大小或容器大小
<!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>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
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>
<script type="text/javascript">
<!--
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>
<body onload="scaleWidth();" onresize="scaleWidth();">
<div id="widthContainer">
<div id="options">点击
<a href="#" _fcksavedurl=""#"" onclick="textSize('smaller'); return false;">字体变小</a> |
<a href="#" onclick="textSize('bigger'); return false;">字体变大</a>
</div>
<!-- END options -->
<div id="header">
<h1>Browser-width defined font size</h1>
</div>
<!-- END header -->
<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>
<!-- END rightContent -->
<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>
<!-- END leftContent -->
<div class="clearer">
</div>
</div>
<!-- END content -->
<div id="footer">
<a href="http://www.dreamdu.com/">Back to the dreamdu</a>
</div>
</div>
<!-- END widthContainer -->
</body>
</html>
35 Real视频播放器代码
<object id="player" name="player" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
width="339" height="227">
<param name="_ExtentX" value="9869">
<param name="_ExtentY" value="7726">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="http://entdown.163.com/ent/garbage/mv/1028/xuemv.rm">
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
<br>
36 使用Ctrl+Enter快捷键方式提交网站表单
运行显示好像只需使用Enter快捷键就可提交了
<script language=javascript>
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>
<form action="http://www.dreamdu.com" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
Ctrl+Enter提交内容信息
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>
37 使用Accesskey快捷键方式提交站点
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.dreamdu.com" method=POST name=form1>
<textarea ></textarea>
<br><input type=submit accessKey="S" value=提交(Alt+s)>
</form>
<button onclick=Preview() >运行</button>
- javascript等特效脚本代码集（26~37）
- javascript等特效脚本代码集（1~15）
- javascript等特效脚本代码集（16~25）
- javascript等特效脚本代码集（38~42）
- 77种javascript特效全功略（包含日期等什么的）
- Javascritp特效－常用脚本代码汇集
- 网页脚本运行代码功能特效
- JavaScript特效集
- JavaScript特效集
- 过滤HTML/javascript等脚本
- Javascript脚本常用代码
- Javascript脚本常用代码
- JavaScript 幻灯片 脚本代码
- javascript常用脚本代码
- JavaScript脚本代码大全
- 有趣的javascript程序：抓不到我！,JavaScript,脚本特效
- java ScriptEngine 使用 （支持JavaScript脚本，eval()函数等）
- 常用的网页特效JavaScript代码
- 我的PC DIY之CPU
- 面向对象的思维方法
- Vector、ArrayList、List使用深入剖析(摘)
- struts、spring、hibernate整合方式
- 我的PC DIY之显卡
- javascript等特效脚本代码集（26~37）
- 用javascript给表格文字数值
- 第一課 言葉
- Struts1.2+Spring2.0+Hibernate3.1整合总结 MyEclipse5.5
- WAVE文件格式详解
- 我的PC DIY之主板
- 怎样能让网站尽快被收录
- 音轨与声道区别
- 临时对象
