JavaScript经典效果集锦

　JavaScript经典效果集锦

作者：佚名　时间： 2006-03-26　文档类型：原创　来自：蓝色理想

第 1 页 JavaScript经典效果集锦 [1]
第 2 页 JavaScript经典效果集锦 [2]
第 3 页 JavaScript经典效果集锦 [3]

*****[第3页目录]*****
二十一类似与google个性页面的好东东------网友155120
二十二漂亮的表格
二十三经典的带阴影的可拖动的浮动层------网友marvellous--------推荐
二十四运行代码的代码------网友:Lenvo
二十五凹陷文字------------网友:Lenvo
二十六漂亮的仿flash菜单---网友:Lenvo
二十七自定义容器和字体大小---网友:greengnn
二十八超级REAL视频播放器---网友:leaf52
二十九网站论坛上面快捷键提交表单的方法---网友:greengnn
三十 accesskey 提交---网友:greengnn
三十一新闻广告图片切换效果+描述---网友:greengnn
三十二菜单特效---网友:greengnn
三十三采用CSS和JS的下拉菜单---网友:greengnn

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

代码拷贝框
<html> <head> <title>DRAG the DIV</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> *{font-size:12px} .dragTable{ font-size:12px; border-top:1px solid #3366cc; margin-bottom: 10px; width:100%; background-color:#FFFFFF; } td{vertical-align:top;} .dragTR{ cursor:move; color:#7787cc; background-color:#e5eef9; height:20px; padding-left:5px; font-weight:bold; } #parentTable{ border-collapse:collapse; letter-spacing:25px; } </style> <script defer> /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/ var Drag={dragged:false, ao:null, tdiv:null, dragStart:function(){ Drag.ao=event.srcElement; if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){ Drag.ao=Drag.ao.offsetParent; Drag.ao.style.zIndex=100; }else return; Drag.dragged=true; Drag.tdiv=document.createElement("div"); Drag.tdiv.innerHTML=Drag.ao.outerHTML; Drag.ao.style.border="1px dashed red"; Drag.tdiv.style.display="block"; Drag.tdiv.style.position="absolute"; Drag.tdiv.style.filter="alpha(opacity=70)"; Drag.tdiv.style.cursor="move"; Drag.tdiv.style.border="1px solid #000000"; Drag.tdiv.style.width=Drag.ao.offsetWidth; Drag.tdiv.style.height=Drag.ao.offsetHeight; Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top; Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left; document.body.appendChild(Drag.tdiv); Drag.lastX=event.clientX; Drag.lastY=event.clientY; Drag.lastLeft=Drag.tdiv.style.left; Drag.lastTop=Drag.tdiv.style.top; }, draging:function(){//重要:判断MOUSE的位置 if(!Drag.dragged||Drag.ao==null)return; var tX=event.clientX; var tY=event.clientY; Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX; Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY; for(var i=0;i<parentTable.cells.length;i++){ var parentCell=Drag.getInfo(parentTable.cells[i]); if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ var subTables=parentTable.cells[i].getElementsByTagName("table"); if(subTables.length==0){ if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ parentTable.cells[i].appendChild(Drag.ao); } break; } for(var j=0;j<subTables.length;j++){ var subTable=Drag.getInfo(subTables[j]); if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){ parentTable.cells[i].insertBefore(Drag.ao,subTables[j]); break; }else{ parentTable.cells[i].appendChild(Drag.ao); } } } } } , dragEnd:function(){ if(!Drag.dragged)return; Drag.dragged=false; Drag.mm=Drag.repos(150,15); Drag.ao.style.borderWidth="0px"; Drag.ao.style.borderTop="1px solid #3366cc"; Drag.tdiv.style.borderWidth="0px"; Drag.ao.style.zIndex=1; }, getInfo:function(o){//取得坐标 var to=new Object(); to.left=to.right=to.top=to.bottom=0; var twidth=o.offsetWidth; var theight=o.offsetHeight; while(o!=document.body){ to.left+=o.offsetLeft; to.top+=o.offsetTop; o=o.offsetParent; } to.right=to.left+twidth; to.bottom=to.top+theight; return to; }, repos:function(aa,ab){ var f=Drag.tdiv.filters.alpha.opacity; var tl=parseInt(Drag.getInfo(Drag.tdiv).left); var tt=parseInt(Drag.getInfo(Drag.tdiv).top); var kl=(tl-Drag.getInfo(Drag.ao).left)/ab; var kt=(tt-Drag.getInfo(Drag.ao).top)/ab; var kf=f/ab; return setInterval(function(){if(ab<1){ clearInterval(Drag.mm); Drag.tdiv.removeNode(true); Drag.ao=null; return; } ab--; tl-=kl; tt-=kt; f-=kf; Drag.tdiv.style.left=parseInt(tl)+"px"; Drag.tdiv.style.top=parseInt(tt)+"px"; Drag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, inint:function(){//初始化 for(var i=0;i<parentTable.cells.length;i++){ var subTables=parentTable.cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].className!="dragTable")break; subTables[j].rows[0].className="dragTR"; subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart); } } document.onmousemove=Drag.draging; document.onmouseup=Drag.dragEnd; } //end of Object Drag } Drag.inint(); function _show(str){ var w=window.open('',''); var d=w.document; d.open(); str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2"); str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />"); str=str.replace(/\r/g,"<br />\n"); d.write(str); } </script> </head> <body> <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable"> <tr > <td width="25%" valgin="top"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td><b>GMAIL</b></td> </tr> <tr> <td>暂时无法显示GMAIL内容</td> <tr> </table><table border=0 class="dragTable" cellspacing="0"> <tr> <td>新浪体育</td> </tr> <tr> <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>焦点</td> </tr> <tr> <td>京广线中断4小时20临客返汉晚点中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者武汉晨报 - 所有 179 相关报道 »</td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>中关村在线</td> </tr> <tr> <td>新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </td> <tr> </table></td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>网易商业</td> </tr> <tr> <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>黑可天下</td> </tr> <tr> <td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td> <tr> </table> </td> </tr> </table> <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" /> </body> </html>
[Ctrl+A 全部选择然后拷贝]

二十二漂亮的表格：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Tables</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <style type="text/css"> /* CSS Document */ body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; background: #E6EAE9; } a { color: #c75f3e; } #mytable { width: 700px; padding: 0; margin: 0; } caption { padding: 0 0 5px 0; width: 700px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align: right; } th { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 12px; background: #CAE8EA url(images/bg_header.jpg) no-repeat; } th.nobg { border-top: 0; border-left: 0; border-right: 1px solid #C1DAD7; background: none; } td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; background: #fff; font-size:11px; padding: 6px 6px 6px 12px; color: #4f6b72; } td.alt { background: #F5FAFA; color: #797268; } th.spec { border-left: 1px solid #C1DAD7; border-top: 0; background: #fff url(images/bullet1.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th.specalt { border-left: 1px solid #C1DAD7; border-top: 0; background: #f5fafa url(images/bullet2.gif) no-repeat; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #797268; } /*---------for IE 5.x bug*/ html>body td{ font-size:11px;} </style> <body> <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <caption> </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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyPixbot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript">  </script> <style type="text/css">  </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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十四运行代码的代码------网友:Lenvo

运行代码框
<script> function Preview() { var TestWin=open(''); TestWin.document.write(code.value); } </script> <textarea id=code cols=60 rows=15></textarea> <br> <button onclick=Preview() >运行</button>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十五凹陷文字------------网友:Lenvo

运行代码框
<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.lenvo.cn/">www.lenvo.cn</a></font> </div>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十六漂亮的仿flash菜单---网友:Lenvo（来自蓝色经典）

运行代码框
<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>  <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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十七自定义容器和字体大小---网友:greengnn

运行代码框
<!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" /> <meta name="author" content="The Man in Blue" /> <meta name="robots" content="all" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <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">  </script> </head> <body onload="scaleWidth();" onresize="scaleWidth();"> <div id="widthContainer"> <div id="options"> <a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> | <a href="#" onclick="textSize('bigger'); return false;">Text bigger</a> </div>  <div id="header"> <h1>Browser-width defined font size</h1> </div>  <div id="content"> <div id="rightContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> </div>  <div id="leftContent"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus. </p> <p> Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum. </p> <p> Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero. </p> <p> Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam. </p> <p> Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum. </p> </div>  <div class="clearer"> </div> </div>  <div id="footer"> <a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a> </div> </div>  </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二十八超级REAL视频播放器---网友:leaf52

运行代码框
<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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

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

运行代码框
<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.jluvip.com/index.html" 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>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

三十 accesskey 提交---网友:greengnn

运行代码框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>无标题文档</title> </head> <body> <form action="http://www.jluvip.com/index.html" method=POST name=form1> <textarea ></textarea> <br><input type=submit accessKey="S" value=提交(Alt+s)> </form>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

三十一新闻广告图片切换效果+描述---网友:greengnn

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

三十二菜单特效---网友:greengnn

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <HTML><HEAD><TITLE>New Page 28</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <META content="MSHTML 6.00.2800.1491" name=GENERATOR> <META content=FrontPage.Editor.Document name=ProgId> <STYLE>#ssm2 A { FONT-SIZE: 12px; COLOR: #808080; FONT-FAMILY: verdana; TEXT-DECORATION: none } #ssm2 A:hover { COLOR: #ccff33 } body{background:url(http://www.infowe.com/images/infowe.gif) no-repeat right center fixed;} </STYLE> </HEAD> <BODY> <SCRIPT language=JavaScript1.2> function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } function highlight(x){ document.forms[x].elements[0].focus() document.forms[x].elements[0].select() } function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } var NS IE=document.all; NS=document.layers; hdrFontFamily="Verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#CCCCCC"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#CCCCCC"; linkTarget="_top"; YOffset=60; staticYOffset=20; menuBGColor="#CCCCCC"; menuIsStatic="no"; menuHeader="Main Index" menuWidth=150; // Must be a multiple of 5! staticMode="advanced" barBGColor="#C0C0C0"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barText="MENU"; function moveOut() { if (window.cancel) { cancel=""; } if (window.moving2) { clearTimeout(moving2); moving2=""; } if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) { if (IE) {ssm2.style.pixelLeft += (5%menuWidth); } if (NS) { document.ssm2.left += (5%menuWidth); } moving1 = setTimeout('moveOut()', 5) } else { clearTimeout(moving1) } }; function moveBack() { cancel = moveBack1() } function moveBack1() { if (window.moving1) { clearTimeout(moving1) } if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) { if (IE) {ssm2.style.pixelLeft -= (5%menuWidth); } if (NS) { document.ssm2.left -= (5%menuWidth); } moving2 = setTimeout('moveBack1()', 5)} else { clearTimeout(moving2) } }; lastY = 0; function makeStatic(mode) { if (IE) {winY = document.body.scrollTop;var NM=ssm2.style } if (NS) {winY = window.pageYOffset;var NM=document.ssm2 } if (mode=="smooth") { if ((IE||NS) && winY!=lastY) { smooth = .2 * (winY - lastY); if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) NM.pixelTop+=smooth; if (NS) NM.top+=smooth; lastY = lastY+smooth; } setTimeout('makeStatic("smooth")', 1) } else if (mode=="advanced") { if ((IE||NS) && winY>YOffset-staticYOffset) { if (IE) {NM.pixelTop=winY+staticYOffset } if (NS) {NM.top=winY+staticYOffset } } else { if (IE) {NM.pixelTop=YOffset } if (NS) {NM.top=YOffset-7 } } setTimeout('makeStatic("advanced")', 1) } } function init() { if (IE) { ssm2.style.pixelLeft = -menuWidth; ssm2.style.visibility = "visible" } else if (NS) { document.ssm2.left = -menuWidth; document.ssm2.visibility = "show" } else { alert('Choose either the "smooth" or "advanced" static modes!') } } function MM_displayStatusMsg(msgStr) { status=msgStr; document.MM_returnValue = true; } </SCRIPT> <SCRIPT language=JavaScript1.2> if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')} tempBar="" for (i=0;i<barText.length;i++) { tempBar+=barText.substring(i, i+1)+"<BR>"} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>') function addItem(text, link, target) { if (!target) {target=linkTarget} document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')} function addHdr(text) { document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')} //Only edit the script between HERE addItem('偶和叶子', 'http://vip.aou.cn/csqf/about.htm', ''); addItem('聆听心海', 'http://vip.aou.cn/csqf/linting.htm', ''); addItem('风言风语', 'http://vip.aou.cn/csqf/fyfy.htm', ''); addItem('风行风影', 'http://vip.aou.cn/csqf/fxfy.htm', ''); addItem('雁过留声', 'http://csqf.etp21.com/', '_blank'); addHdr('WELCOME TO'); addItem('经广俱乐部', 'http://dj973.tz315.net', '_blank'); // and HERE! No more! document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>') if (IE) {document.write('</DIV>')} if (NS) {document.write('</LAYER>')} if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);} </SCRIPT> <SCRIPT> window.onload=init </SCRIPT> <p style="height:1000px;"></p> </BODY></HTML>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

三十三采用CSS和JS的下拉菜单---网友:greengnn

出处：蓝色理想
责任编辑：moby

上一页 JavaScript经典效果集锦 [2] 下一页

◎进入论坛网页制作、网站综合版块参加讨论

相关文章

js版幻灯片效果

作者文章

MSN登录常见故障两则解决办法


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule