網頁緩沖效果特效代碼

2024-07-11 08:38:38

字體：大中小

來源：轉載

供稿：網友

首先我要說的是,我是菜鳥,這些文章是獻給和我一樣想要學習的菜鳥們.論壇里有幾位朋友發過緩沖效果,但是象我這種菜鳥看他們的代碼實在是一種痛苦,因為不是一個層次的.

先我要說的是,我是菜鳥,這些文章是獻給和我一樣想要學習的菜鳥們.
論壇里有幾位朋友發過緩沖效果,但是象我這種菜鳥看他們的代碼實在是一種痛苦,因為不是一個層次的.
所以我用最最冗余的代碼來寫出這種效果,目的就是希望菜鳥們能看懂,
當我們不菜的時候我們再回頭去看高手們的東西.
最后,請相信這句話:
有一天菜鳥也會成為高手,(前提是你要努力哈哈^^)

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p><p><html xmlns="http://www.w3.org/1999/xhtml"></p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p><p><title>Untitled Document</title></p><p></head></p><p><style></p><p>body { font-size:12px}</p><p>#box { background:#FFFFCC; border:1px solid #FFCC66; width:600px; height:100px;display:none; text-align:right; margin:2px; overflow:hidden}</p><p>#box2 { background:#CDEDEC; border:1px solid #3399CC; width:600px; height:100px;display:none;text-align:right; margin:2px; overflow:hidden}</p><p>.bt_down {background: #DDDCE4 url(http://bbs.blueidea.com/images/default/arrow_down.gif) no-repeat 35px 46%; padding:5px 20px 5px 5px; text-align:left}</p><p>#my {}</p><p>#my .my_ { background:#DDDCE4; width:200px; height:150px; display:none; overflow:hidden}</p><p>#my .my_ ul{ list-style:none; padding:0; margin:10px 0 10px 10px; height:140px}</p><p>#my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0}</p><p>#s_img { width:430px; overflow:scroll; overflow-y:hidden;overflow-x:hidden; border:1px solid #ccc}</p><p>#imgs ul { list-style:none; margin-left:0; padding-left:0}</p><p>#imgs ul li{ float:left; margin:3px;}</p><p></style></p><p><script></p><p>//下面重復的類似的我就不做注釋了~~</p><p>//fast to slow 由快到慢</p><p>//聲明一個函數f_s()</p><p>function f_s(){</p><p>var obj=document.getElementById("box");//獲取ID為box的對象</p><p>obj.style.display="block";//設置對象obj為顯示</p><p>obj.style.width="1px";//設置對象obj的寬度為1px</p><p>var changeW=function(){ //(關于函數這一點，什么閉包，什么類、原型的，弄的我頭大了，以后慢慢理解吧。這里我理解的是創建一個函數直接量并把它存進變量changeW里)</p><p>var obj_w=parseInt(obj.style.width);//把對象的寬度轉換為一個數值，并存入變量obj_w中；</p><p>if(obj_w<600){ //判斷，如果寬度數值小于600</p><p>obj.style.width=(obj_w Math.ceil((600-obj_w)/15)) "px";//計算對象的寬度。。。隨著寬度的變長，遞增量越來越小 </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1342933.html'>CSS教程(5)：通過實例學習CSS背景</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1342935.html'>CSS 完美兼容IE6/IE7/FF的通用hack方法</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1342934">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1342934&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流