快捷導(dǎo)航

javascript 緩沖效果實現(xiàn)代碼推薦

更新時間：2009年09月16日 12:57:19 作者：

緩沖效果就是實現(xiàn)一個頁面的由慢到快或由快到慢的過程。

菜鳥版代碼如下:
理解這段代碼就基本上掌握了

function f_s() { 
var obj = document.getElementById("top"); 
obj.style.display = "block"; 
obj.style.height = "1px"; 

var sw = function () { 
var s_width = parseInt(obj.style.height); 
if (s_width < 350) { 
obj.style.height = (s_width + Math.ceil((350 - s_width) / 15)) + "px"; 
} 
else { 
clearInterval(st); 
} 
} 
var st = window.setInterval(sw, 1); 
}

<!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" /> <meta name="author" content="Stri" /> <title>緩沖效果</title> <style type="text/css"> * { padding:0px; margin:0px; } #top { width:80px; height:350px; float:left; background-color:#090; display:none; color:#fff; text-align:right; border:1px solid #000; s } #top0 { width:80px; float:right; height:350px; background-color:#090; display:none; color:#fff; text-align:right; border:1px solid #000; s } </style> <link href="cssStyle/style_1_common.css" rel="stylesheet" type="text/css" /> </head> <body> <div   class="vvxyksv9kd"   id="page_head"></div> <div   class="vvxyksv9kd"   id="wrap"> <h1>緩沖效果</h1> <a href="javascript:void(0)" onclick="f_s();">打開</a>這是一個由快到慢的過程<a href="javascript:void(0)" onclick="close_f_s('top','350px')">關(guān)閉</a><br> <a href="javascript:void(0)" onclick="s_f();">打開</a>這是一個由慢到快的過程<a href="javascript:void(0)" onclick="close_f_s('top0','350px')">關(guān)閉</a> <div   class="vvxyksv9kd"   id="top"></div> <div   class="vvxyksv9kd"   id="top0"></div> </div> <div   class="vvxyksv9kd"   id="page_foot"></div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

中級版本

復(fù)制代碼代碼如下:

/* 
函數(shù)名稱: Scroll 
Scroll(obj, h, s) 
參數(shù)說明: 
obj,[object] id值或?qū)ο? 必需 
h,[height] 展開后的高度. 可選(默認(rèn)為200px) 
s,[speed] 展開速度,值越小展開速度越慢. 可選(默認(rèn)為1.2){建議取值為1.1到2.0之間[例如:1.17]}. 
函數(shù)返回值: 
true 展開(對象的高度等于展開后的高度) 
false 關(guān)閉(對象的高度等于原始高度) 
*/ 
function Scroll(obj, h, s){ 
if(obj == undefined){return false;} 
var h = h || 200; 
var s = s || 1.2; 
var obj = typeof(obj)=="string"?document.getElementById(obj):obj; 
var status = obj.getAttribute("status")==null; 
var oh = parseInt(obj.offsetHeight); 
obj.style.height = oh; 
obj.style.display = "block"; 
obj.style.overflow = "hidden"; 
if(obj.getAttribute("oldHeight") == null){ 
obj.setAttribute("oldHeight", oh); 
}else{ 
var oldH = Math.ceil(obj.getAttribute("oldHeight")); 
} 
var reSet = function(){ 
if(status){ 
if(oh < h){ 
oh = Math.ceil(h-(h-oh)/s); 
obj.style.height = oh+"px"; 
}else{ 
obj.setAttribute("status",false); 
window.clearInterval(IntervalId); 
} 
}else{ 
obj.style.height = oldH+"px"; 
obj.removeAttribute("status"); 
window.clearInterval(IntervalId); 
} 
} 
var IntervalId = window.setInterval(reSet,10); 
return status; 
}

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

高級版本
這個很全,不過,我是沒有看懂的.- -!!
http://www.cnblogs.com/cloudgamer/

<!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>Tween</title> </head> <body> <div style="padding-left:50px;"> <div style="position:relative; border:1px solid #000000; width:550px; height:50px;"> <div   class="vvxyksv9kd"   id="idMove" style="width:50px; height:50px; background:#930; position:absolute;"></div> </div> <div style="position:relative;width:550px;height:200px; margin-top:50px;"> <div   class="vvxyksv9kd"   id="idChart" style="border:1px solid #000;height:200px;"> </div> <div   class="vvxyksv9kd"   id="idLine" style="position:absolute;top:0;left:0;height:200px;width:1px;background:#000;"></div> </div> </div> <div> <p> Tween類型： <br> <label> <input name="vTween" type="radio" value="Linear" checked="checked" /> Linear </label> <label> <input name="vTween" type="radio" value="Quad" /> Quadratic </label> <label> <input name="vTween" type="radio" value="Cubic" /> Cubic </label> <label> <input name="vTween" type="radio" value="Quart" /> Quartic </label> <label> <input name="vTween" type="radio" value="Quint" /> Quintic </label> <label> <input name="vTween" type="radio" value="Sine" /> Sinusoidal </label> <br> <label> <input name="vTween" type="radio" value="Expo" /> Exponential </label> <label> <input name="vTween" type="radio" value="Circ" /> Circular </label> <label> <input name="vTween" type="radio" value="Elastic" /> Elastic </label> <label> <input name="vTween" type="radio" value="Back" /> Back </label> <label> <input name="vTween" type="radio" value="Bounce" /> Bounce </label> </p> <p> ease類型： <br> <label> <input name="vEase" type="radio" value="easeIn" checked="checked" /> easeIn </label> <label> <input name="vEase" type="radio" value="easeOut" /> easeOut </label> <label> <input name="vEase" type="radio" value="easeInOut" /> easeInOut </label> </p> <input id="idSpeed" type="button" value="減慢速度" /> <input id="idRun" type="button" value=" Run " /> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

打包下載

您可能感興趣的文章: