久久精品女人毛片水多国产,中国国产一级精品片免费,中国日本亚洲aav

　JavaScript經(jīng)典效果集錦

作者：佚名　時(shí)間： 2006-03-26　文檔類(lèi)型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) JavaScript經(jīng)典效果集錦 [1]
第 2 頁(yè) JavaScript經(jīng)典效果集錦 [2]
第 3 頁(yè) JavaScript經(jīng)典效果集錦 [3]

*****[第3頁(yè)目錄](méi)*****
二十一類(lèi)似與google個(gè)性頁(yè)面的好東東------網(wǎng)友155120
二十二漂亮的表格
二十三經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層------網(wǎng)友marvellous--------推薦
二十四運(yùn)行代碼的代碼------網(wǎng)友:Lenvo
二十五凹陷文字------------網(wǎng)友:Lenvo
二十六漂亮的仿flash菜單---網(wǎng)友:Lenvo
二十七自定義容器和字體大小---網(wǎng)友:greengnn
二十八超級(jí)REAL視頻播放器---網(wǎng)友:leaf52
二十九網(wǎng)站論壇上面快捷鍵提交表單的方法---網(wǎng)友:greengnn
三十 accesskey 提交---網(wǎng)友:greengnn
三十一新聞廣告圖片切換效果+描述---網(wǎng)友:greengnn
三十二菜單特效---網(wǎng)友:greengnn
三十三采用CSS和JS的下拉菜單---網(wǎng)友:greengnn

二十一類(lèi)似與google個(gè)性頁(yè)面的好東東:

代碼拷貝框
<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){//取得坐標(biā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>暫時(shí)無(wú)法顯示GMAIL內(nèi)容</td> <tr> </table><table border=0 class="dragTable" cellspacing="0"> <tr> <td>新浪體育</td> </tr> <tr> <td>解剖威隊(duì)獨(dú)門(mén)利器FW28 2萬(wàn)轉(zhuǎn)引擎匹配超級(jí)變速器頒獎(jiǎng)：辛吉斯欣喜能以冠軍起步<br/> 印度搭檔創(chuàng)下紀(jì)錄法新社前瞻冬奧短道速滑：中韓唱主角美加施冷箭</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>焦點(diǎn)</td> </tr> <tr> <td>京廣線(xiàn)中斷4小時(shí)20臨客返漢晚點(diǎn) 中國(guó)新聞網(wǎng)-湖北分社 - 所有 235 相關(guān)報(bào)道 »哈馬斯已有總理人選解放日?qǐng)?bào)報(bào)業(yè)集團(tuán) - 所有 489 相關(guān)報(bào)道 »陳水扁是兩岸關(guān)系麻煩制造者武漢晨報(bào) - 所有 179 相關(guān)報(bào)道 »</td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>中關(guān)村在線(xiàn)</td> </tr> <tr> <td>新年行情速遞雙敏板卡低價(jià)推薦終于等到了，映泰6600GT一降降一百羅技G15游戲鍵盤(pán)熱力促銷(xiāo)，代購(gòu)價(jià)僅529元 </td> <tr> </table></td> <td width="25%"> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>網(wǎng)易商業(yè)</td> </tr> <tr> <td>上海GDP增幅去年出現(xiàn)回落應(yīng)對(duì)反傾銷(xiāo) 中國(guó)鞋企聯(lián)手對(duì)抗歐盟尹家緒操盤(pán)南方汽車(chē) 長(zhǎng)安謀求曲線(xiàn)整體境外上市</td> <tr> </table> <table border=0 class="dragTable" cellspacing="0"> <tr> <td>黑可天下</td> </tr> <tr> <td>上海GDP增幅去年出現(xiàn)回落應(yīng)對(duì)反傾銷(xiāo) 中國(guó)鞋企聯(lián)手對(duì)抗歐盟尹家緒操盤(pán)南方汽車(chē) 長(zhǎng)安謀求曲線(xiàn)整體境外上市</td> <tr> </table> </td> </tr> </table> <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" /> </body> </html>
[Ctrl+A 全部選擇然后拷貝]

二十二漂亮的表格：

運(yùn)行代碼框
<!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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十三經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層--轉(zhuǎn)貼自網(wǎng)友:marvellous

運(yùn)行代碼框
<!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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十四運(yùn)行代碼的代碼------網(wǎng)友:Lenvo

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

二十五凹陷文字------------網(wǎng)友:Lenvo

運(yùn)行代碼框
<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 >www.lenvo.cn</a></font> </div>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十六漂亮的仿flash菜單---網(wǎng)友:Lenvo（來(lái)自藍(lán)色經(jīng)典）

運(yùn)行代碼框
<style> /* 先把這個(gè) 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 這是把事件動(dòng)作綁定到菜單上的函數(shù) */ 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'; //這是鼠標(biāo)移上去時(shí)的背景顏色 style.border='1px solid #ffffff'; //邊框 style.color='black'; //文字顏色 filters[0].play(); } } onmouseout=function(){ with(this){ filters[0].apply(); style.background='#336699'; //這是鼠標(biāo)離開(kāi)時(shí)的背景顏色 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 >www.lenvo.cn</a></td> <td>Name</td> <td>Is</td> <td>LeX</td> <td>Rus</td> <td>!!!</td> </tr> </table> <script>attachXMenu(xmenu0); //在上面這個(gè)table結(jié)束的地方執(zhí)行事件動(dòng)作的綁定, 這里的這個(gè)xmenu0就是那個(gè)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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十七自定義容器和字體大小---網(wǎng)友:greengnn

運(yùn)行代碼框
<!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 >Back to the explanation</a> </div> </div>  </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十八超級(jí)REAL視頻播放器---網(wǎng)友:leaf52

運(yùn)行代碼框
<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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

二十九網(wǎng)站論壇上面快捷鍵提交表單的方法---網(wǎng)友:greengnn

運(yùn)行代碼框
<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提交內(nèi)容信息 </textarea> <input type=Submit value="Submit" name=Submit> </form>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

三十 accesskey 提交---網(wǎng)友:greengnn

運(yùn)行代碼框
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>無(wú)標(biāo)題文檔</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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

三十一新聞廣告圖片切換效果+描述---網(wǎng)友:greengnn

運(yùn)行代碼框
<!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>新聞切換技術(shù)</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 ><img src="http://cimg.163.com/tech/2006/1/18/2006011810122068706.jpg" alt="網(wǎng)易學(xué)院05年軟件評(píng)選結(jié)果" width="240" height="180" border="0" /></a> </div> <h2><a >網(wǎng)易學(xué)院05年軟件評(píng)選結(jié)果</a></h2> <p>經(jīng)過(guò)大家的熱情投票和我們的辛勞整理，網(wǎng)易學(xué)院2005年年度軟件評(píng)選結(jié)果終于出爐啦。點(diǎn)擊進(jìn)入查看……<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic2" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/200601171557008cee7.jpg" alt="顛覆叢林動(dòng)物生存法則" width="240" height="180" border="0" /></a> </div> <h2><a >顛覆叢林動(dòng)物生存法則</a></h2> <p>群居動(dòng)物的這種行為顛覆了我們通常認(rèn)為的，在動(dòng)物世界通行的 “叢林法則”，動(dòng)物不都自私，不都是弱肉強(qiáng)食的。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic3" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/2006011711483290a60.jpg" alt="WAPI并非貿(mào)易陰謀" width="240" height="180" border="0" /></a> </div> <h2><a >WAPI并非貿(mào)易陰謀</a></h2> <p>近日國(guó)家做出決定：“將向其他的國(guó)內(nèi)及國(guó)外企業(yè)公布該算法”。事實(shí)證明中國(guó)WAPI標(biāo)準(zhǔn)并非是貿(mào)易陰謀。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</a></p> </div> <div id="focusPic4" style="display: none ;"> <div class="pic"> <a ><img src="http://cimg.163.com/tech/2006/1/17/200601171002503f251.jpg" alt="新視野號(hào)探測(cè)冥王星特別專(zhuān)題" width="240" height="180" border="0" /></a> </div> <h2><a >新視野號(hào)探測(cè)冥王星特別專(zhuān)題</a></h2> <p>美國(guó)宇航局將于北京時(shí)間18日凌晨2時(shí)24分發(fā)射新視野號(hào)探測(cè)器，造訪這顆人類(lèi)唯一尚未探測(cè)過(guò)的行星-冥王星。<img src="/newimg/i2.gif" alt="詳細(xì)" width="3" height="5" /> <a class="cDRed">詳細(xì)</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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

三十二菜單特效---網(wǎng)友:greengnn

運(yùn)行代碼框
<!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('聆聽(tīng)心海', 'http://vip.aou.cn/csqf/linting.htm', ''); addItem('風(fēng)言風(fēng)語(yǔ)', 'http://vip.aou.cn/csqf/fyfy.htm', ''); addItem('風(fēng)行風(fēng)影', 'http://vip.aou.cn/csqf/fxfy.htm', ''); addItem('雁過(guò)留聲', 'http://csqf.etp21.com/', '_blank'); addHdr('WELCOME TO'); addItem('經(jīng)廣俱樂(lè)部', '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 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

三十三采用CSS和JS的下拉菜單---網(wǎng)友:greengnn

出處：藍(lán)色理想
責(zé)任編輯：moby

上一頁(yè) JavaScript經(jīng)典效果集錦 [2] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

更多相關(guān)鏈接

xScrollStick

COOL而實(shí)用的動(dòng)態(tài)效果

常用JS網(wǎng)頁(yè)廣告代碼

xWin之JS版

js版幻燈片效果

作者文章

意大利超市里的超強(qiáng)創(chuàng)意圖片

MSN登錄常見(jiàn)故障兩則解決辦法


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶(hù)體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大�！熬�•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買(mǎi)真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線(xiàn)縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx