網頁緩沖效果特效代碼

2024-07-11 08:24:29

字體：大中小

來源：轉載

供稿：網友

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

<!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=utf-8" /><title>Untitled Document</title></head><style>body { font-size:12px}#box { background:#FFFFCC; border:1px solid #FFCC66; width:600px; height:100px;display:none; text-align:right; margin:2px; overflow:hidden}#box2 { background:#CDEDEC; border:1px solid #3399CC; width:600px; height:100px;display:none;text-align:right; margin:2px; overflow:hidden}.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}#my {}#my .my_ { background:#DDDCE4; width:200px; height:150px; display:none; overflow:hidden}#my .my_ ul{ list-style:none; padding:0; margin:10px 0 10px 10px; height:140px}#my .my_ ul li { width:48%; float:left; text-align:center; line-height:22px; border-bottom:1px solid #B6B6C0}#s_img { width:430px; overflow:scroll; overflow-y:hidden;overflow-x:hidden; border:1px solid #ccc}#imgs ul { list-style:none; margin-left:0; padding-left:0}#imgs ul li{ float:left; margin:3px;}</style><script>//下面重復的類似的我就不做注釋了~~//fast to slow 由快到慢//聲明一個函數f_s()function f_s(){var obj=document.getElementById("box");//獲取ID為box的對象obj.style.display="block";//設置對象obj為顯示obj.style.width="1px";	//設置對象obj的寬度為1pxvar changeW=function(){ //(關于函數這一點，什么閉包，什么類、原型的，弄的我頭大了，以后慢慢理解吧。這里我理解的是創建一個函數直接量并把它存進變量changeW里)var obj_w=parseInt(obj.style.width);//把對象的寬度轉換為一個數值，并存入變量obj_w中；if(obj_w<600){ //判斷，如果寬度數值小于600obj.style.width=(obj_w Math.ceil((600-obj_w)/15)) "px";//計算對象的寬度。。。隨著寬度的變長，遞增量越來越小}else{clearInterval(bw);//如果大于等于600的話，不再執行setInterval,意思就是這個時候停止增加寬度了。}}var bw=window.setInterval(changeW,1)//每0.001秒調用一次changeW}//slow to fast 由慢到快//聲明一個函數s_f()function s_f(){var obj=document.getElementById("box2");var e_add=1;//初始化遞增量obj.style.display="block";obj.style.width="1px";var changeW=function(){//我理解的是創建一個函數直接量并把它存進變量changeW里var obj_w;e_addobj_w=parseInt(obj.style.width);e_add*=1.05;//以后每次遞增的值都是if(obj_w<600){obj.style.width=(obj_w e_add) "px";//隨著寬度的變長，遞增量越來越大}else{clearInterval(bw);obj.style.width="600px";//因為(obj_w e_add)這種計算方法會超出預定義的寬度,所以這里在緩沖完以后重新設置它的寬度.造成一種假象哈哈}}var bw=window.setInterval(changeW,1)}//關閉層function closeW(id,w){var obj=document.getElementById(id);//獲取ID為box的對象obj.style.width=w;var closeDiv=function(){var obj_w=parseInt(obj.style.width);if(obj_w>1){obj.style.width=(obj_w-Math.ceil(obj_w)/20) "px";//計算對象的寬度。。。隨著寬度的變長，遞增量越來越小}else{clearInterval(bw);obj.style.display="none";}}var bw=window.setInterval(closeDiv,1)//每0.001秒調用一次changeW}//下面這個函數是打開我的↓function open_my(){var obj=document.getElementById("my_");//獲取ID為box的對象obj.style.display="block";//設置對象obj為顯示obj.style.width="1px";	//設置對象obj的寬度為1pxobj.style.height="1px";var changeW=function(){ //(關于函數這一點，什么閉包，什么類、原型的，弄的我頭大了，以后慢慢理解吧。這里我理解的是創建一個函數直接量并把它存進變量changeW里)var obj_w=parseInt(obj.style.width);//把對象的寬度轉換為一個數值，并存入變量obj_w中；var obj_h=parseInt(obj.style.height);if(obj_w<200 && obj_h<150){ //判斷，如果寬度數值小于600obj.style.width=(obj_w Math.ceil((200-obj_w)/20)) "px";//計算對象的寬度。。。隨著寬度的變長，遞增量越來越小obj.style.height=(obj_h Math.ceil((150-obj_h)/15)) "px";}else{clearInterval(bw);//如果大于等于600的話，不再執行setInterval,意思就是這個時候停止增加寬度了。}}var bw=window.setInterval(changeW,1)//每0.001秒調用一次changeW}//下面這個函數是關閉我的↓顯示出來的層function close_my(id){var obj=document.getElementById(id);//獲取ID為box的對象var closeDiv=function(){var obj_w=parseInt(obj.style.width);var obj_h=parseInt(obj.style.height);if(obj_w>1 && obj_h >1){obj.style.width=(obj_w-Math.ceil(obj_w)/20) "px";//計算對象的寬度。。。隨著寬度的變長，遞增量越來越小obj.style.height=(obj_h-Math.ceil(obj_h)/15) "px";}else{clearInterval(bw);obj.style.display="none";}}var bw=window.setInterval(closeDiv,1)//每0.001秒調用一次changeW}</script><body>首先我要說的是,這些文章是獻給和我一樣想要學習的菜鳥們.<br /><br />論壇里有幾位朋友發過緩沖效果,但是象我這種菜鳥看他們的代碼實在是一種痛苦,因為不是一個層次的.<br /><br />所以我用最最冗余的代碼來寫出這種效果,目的就是希望菜鳥們能看懂,<br /><br />當我們不菜的時候我們再回頭去看高手們的東西.<br /><br />最后,請相信這句話:<br /><br />有一天菜鳥也會成為高手,(前提是你要努力哈哈^^)<br /><br /><a href="#" onclick="f_s()">由快到慢</a>&nbsp;&nbsp;<br /><br /><a href="#" onclick="s_f(); return false">由慢到快</a>&nbsp;&nbsp;<br /><br /><div id="box" ><h3>快->慢<a href="#" onclick="closeW('box','600px')">[關閉]</a></h3></div><div id="box2" ><h3>慢->快<a href="#" onclick="closeW('box2','600px')">[關閉]</a></h3></div><h3>我們既然做出這種效果了，就要把它應用到實際當中去</h3><h3>現在來看一下緩沖效果在實際當中的應用</h3><div id="my"><a href="#" class="bt_down" onmouseover="open_my()">我的</a><div class="my_" id="my_" ><ul><li>我的話題</li><li>我的收藏</li><li>我的權限</li><li>我的投票</li><li>我的活動</li><li>我的同城</li><li>我的作品</li><li>我的地址</li><li>我的專長</li><li>我的好友</li><li>我的空間</li><li><a href="#" onclick="close_my('my_')">關閉</a></li></ul></div></div><br /><br /><div id="s_img" style="width:430px;"><div id="imgs" style="width:1700px;"><ul><li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8421_20080902_112516_6677857_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/09/01/work_352426_8413_20080901_201448_1164245_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/08/29/work_291488_8330_20080829_151402_6235352_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/09/02/work_577_8423_20080902_115301_643310_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/08/30/work_23709_8344_20080830_123900_9878235_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/09/01/work_387129_8408_20080901_180829_5234680_t.png" /></li><li><img src="http://case.blueidea.cn/files/2008/08/31/work_443685_8362_20080831_093043_8349305_t.jpg" /></li><li><img src="http://case.blueidea.cn/files/2008/09/01/work_202433_8401_20080901_163123_1710510_t.jpg" /></li></ul></div></div><br /><a href="#" onclick="scrol(); return false">向左滾動</a><a href="#" onclick="scror(); return false">向右滾動</a><br /><br />當然,上面這種效果只是我用來演示緩沖效果的,<br /><br />它并不適合做這種效果,因為我這里寫的函數只會轉一次.<br /><br />多次的話用這種方法好象不是很好實現,<br /><br />最后我說一下,不要被我這里的代碼嚇跑,<br /><br />看上去代碼很多,主要是后面2個列子的原因使代碼看起來很多<br /><br />真正重要的是f_s(),s_f(),closeW()<br /><br />如果能夠看明白,那么你也可以舉一反三了.<br /><br />今天就說到這里了,希望這些東西能對你有一點幫助^^<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;by 褪色<br /><br /><script type="text/javascript">function scror(){var obj=document.getElementById("s_img");var h=function(){var obj_w=parseInt(obj.style.width);if(obj.scrollLeft<obj_w){obj.scrollLeft=(obj.scrollLeft Math.ceil((obj_w-obj.scrollLeft)/15));}else{clearInterval(bw);}}var bw=window.setInterval(h,1)}function scrol(){var obj=document.getElementById("s_img");var h=function(){var obj_w=parseInt(obj.style.width);if(obj.scrollLeft>1){obj.scrollLeft-=Math.ceil(obj_w)/50;}else{clearInterval(bw);}}var bw=window.setInterval(h,1)//obj.scrollLeft-=parseInt(obj.style.width);}</script></body></html>            </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/1338749.html'>IE8的一些有趣的新功能</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1338751.html'>CSS教程:制作對用戶友好的站內搜索表單</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=1338750">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1338750&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">

學習交流