当前位置：Gxlcms > JavaScript > javascript缓冲效果实现代码推荐_javascript技巧
javascript缓冲效果实现代码推荐_javascript技巧

时间：2021-07-01 10:21:17 帮助过：8人阅读
菜鸟版代码如下:

理解这段代码就基本上掌握了 
 代码如下:

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> 
 
</head> 
<body> 
<div id="page_head"></div> 
<div id="wrap"> 
<h2>缓冲效果</h2> 
打开这是一个由快到慢的过程关闭<br> 
打开这是一个由慢到快的过程关闭 
<div id="top"></div> 
<div id="top0"></div> 
</div> 
<div id="page_foot"></div> 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
} 
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) / 10)) + "px"; 
} 
else { 
clearInterval(st); 
} 
} 
var st = window.setInterval(sw, 1); 
} 

function s_f() { 

var obj = document.getElementById("top0"); 
var mg = 1; 
obj.style.display = "block"; 
obj.style.height = "1px"; 

var sw = function () { 
var s_width = parseInt(obj.style.height); 
if (s_width < 350) { 
mg *= 1.05; 

obj.style.height = (s_width + mg) + "px"; 
} 
else { 
obj.style.height = "350px"; 
clearInterval(st); 
} 
} 
var st = window.setInterval(sw, 1); 
} 
function close_f_s(id, w) { 
var obj = document.getElementById(id); 

var sw1 = function () { 
var s_height = parseInt(obj.style.height); 
if (s_height > 0) { 
obj.style.height = (s_height - Math.ceil(s_height / 15)) + "px"; 
} 
else { 
clearInterval(st1); 
obj.style.display = "none"; 
} 
} 
var st1 = window.setInterval(sw1, 1); 
} 

</ script> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

中级版本 
 代码如下:

/* 
函数名称: Scroll 
Scroll(obj, h, s) 
参数说明: 
obj,[object] id值或对象. 必需 
h,[height] 展开后的高度. 可选(默认为200px) 
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 
函数返回值: 
true 展开(对象的高度等于展开后的高度) 
false 关闭(对象的高度等于原始高度) 
*/ 
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; 
}

<!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="zh-CN" lang="zh-CN"> 
<head> 
<title>层展开/关闭 - 运动缓冲效果</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="keywords" content="小秦,展开,关闭,运动缓冲,效果,javascript,封装" /> 
<meta name="description" content="展开/关闭 - 运动缓冲效果" /> 
<meta name="copyright" content="Copyright 2008 XQin.cn" /> 
<meta name="author" content="小秦" /> 
<script type="text/javascript"> 
/* 
函数名称: Scroll 
Scroll(obj, h, s) 
参数说明: 
obj,[object] id值或对象. 必需 
h,[height] 展开后的高度. 可选(默认为200px) 
s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 
函数返回值: 
true 展开(对象的高度等于展开后的高度) 
false 关闭(对象的高度等于原始高度) 
*/ 
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; 
} 
window.onload= function(){ 
document.getElementById('detail').onclick = function(){ 
Scroll('detail', 300, 1.3); 
} 
document.getElementById('text').onclick = function(){ 
Scroll('text'); 
} 
} 
</ script> 
</head> 
<body> 
<p id="detail" style="border:1px dashed #f00;">这是一个段落啦!!哇哈哈哈
点我一下下啦:)</p> 
<div id="text" style="border:1px solid #0f0">Hello World!
你敢点我不 -_|||</div> 
<button onclick="Scroll('text', 400, 1.2)">Hello World</button> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

高级版本 
这个很全,不过,我是没有看懂的.- -!! 
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 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 id="idChart" style="border:1px solid #000;height:200px;"> </div> 
<div 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> 
<script> 
/* 
算法来源：http://www.robertpenner.com/easing/ 
*/ 
var Tween = { 
    Linear: function(t,b,c,d){ return c*t/d + b; }, 
    Quad: { 
        easeIn: function(t,b,c,d){ 
            return c*(t/=d)*t + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return -c *(t/=d)*(t-2) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if ((t/=d/2) < 1) return c/2*t*t + b; 
            return -c/2 * ((--t)*(t-2) - 1) + b; 
        } 
    }, 
    Cubic: { 
        easeIn: function(t,b,c,d){ 
            return c*(t/=d)*t*t + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return c*((t=t/d-1)*t*t + 1) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if ((t/=d/2) < 1) return c/2*t*t*t + b; 
            return c/2*((t-=2)*t*t + 2) + b; 
        } 
    }, 
    Quart: { 
        easeIn: function(t,b,c,d){ 
            return c*(t/=d)*t*t*t + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return -c * ((t=t/d-1)*t*t*t - 1) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 
            return -c/2 * ((t-=2)*t*t*t - 2) + b; 
        } 
    }, 
    Quint: { 
        easeIn: function(t,b,c,d){ 
            return c*(t/=d)*t*t*t*t + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return c*((t=t/d-1)*t*t*t*t + 1) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 
            return c/2*((t-=2)*t*t*t*t + 2) + b; 
        } 
    }, 
    Sine: { 
        easeIn: function(t,b,c,d){ 
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return c * Math.sin(t/d * (Math.PI/2)) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 
        } 
    }, 
    Expo: { 
        easeIn: function(t,b,c,d){ 
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if (t==0) return b; 
            if (t==d) return b+c; 
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 
        } 
    }, 
    Circ: { 
        easeIn: function(t,b,c,d){ 
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 
        } 
    }, 
    Elastic: { 
        easeIn: function(t,b,c,d,a,p){ 
            if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
            else var s = p/(2*Math.PI) * Math.asin (c/a); 
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
        }, 
        easeOut: function(t,b,c,d,a,p){ 
            if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
            else var s = p/(2*Math.PI) * Math.asin (c/a); 
            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b); 
        }, 
        easeInOut: function(t,b,c,d,a,p){ 
            if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; } 
            else var s = p/(2*Math.PI) * Math.asin (c/a); 
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 
        } 
    }, 
    Back: { 
        easeIn: function(t,b,c,d,s){ 
            if (s == undefined) s = 1.70158; 
            return c*(t/=d)*t*((s+1)*t - s) + b; 
        }, 
        easeOut: function(t,b,c,d,s){ 
            if (s == undefined) s = 1.70158; 
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
        }, 
        easeInOut: function(t,b,c,d,s){ 
            if (s == undefined) s = 1.70158; 
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 
        } 
    }, 
    Bounce: { 
        easeIn: function(t,b,c,d){ 
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            if ((t/=d) < (1/2.75)) { 
                return c*(7.5625*t*t) + b; 
            } else if (t < (2/2.75)) { 
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
            } else if (t < (2.5/2.75)) { 
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
            } else { 
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
            } 
        }, 
        easeInOut: function(t,b,c,d){ 
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b; 
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b; 
        } 
    } 
} 

////////////////////////////////////////////////////////// 

var $ = function (id) { 
    return "string" == typeof id ? document.getElementById(id) : id; 
}; 

var Each = function(list, fun){ 
    for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 

////////////////////////////////////////////////////////// 

var fun, iChart = 550, iDuration = 100; 

function Move(){ 
    var oM = $("idMove").style, oL = $("idLine").style, t=0, c=500, d=iDuration; 
    oM.left=oL.left="0px"; clearTimeout(Move._t); 
    function _run(){ 
        if(t<d){ 
            t++; 
            oM.left = Math.ceil(fun(t,0,c,d)) + "px"; 
            oL.left = Math.ceil(Tween.Linear(t,0,iChart,d)) + "px"; 
            Move._t = setTimeout(_run, 10); 
        }else{ 
            oM.left = c + "px"; 
            oL.left = iChart + "px"; 
        } 
    } 
    _run(); 
} 

//////////////////////////////////////////////////////// 

function Chart(){ 
    var a = []; 
    for (var i = 0; i < iChart; i++) { 
        a.push('<div style="background-color:#f60;font-size:0;width:3px;height:3px;position:absolute;left:' + (i-1) + 'px;top:' + (Math.ceil(fun(i,200,-200,iChart))) + 'px;"><\/div>'); 
    } 
    $("idChart").innerHTML = a.join(""); 
} 

//////////////////////////////////////////////////////// 

var arrTween = document.getElementsByName("vTween"); 
var arrEase = document.getElementsByName("vEase"); 

Each(arrTween, function(o){ o.onclick = function(){ SetFun(); Chart(); } }) 
Each(arrEase, function(o){ o.onclick = function(){ SetFun(); Chart(); } }) 

function SetFun(){ 
    var sTween, sEase; 
    Each(arrTween, function(o){ if(o.checked){ sTween = o.value; } }) 
    Each(arrEase, function(o){ if(o.checked){ sEase = o.value; } }) 
    fun = sTween == "Linear" ? Tween.Linear : Tween[sTween][sEase]; 
} 

$("idRun").onclick = function(){ SetFun(); Chart(); Move(); } 

$("idSpeed").onclick = function(){ 
    if(iDuration == 100){ 
        iDuration = 500; this.value = "加快速度"; 
    }else{ 
        iDuration = 100; this.value = "减慢速度"; 
    } 
} 
</ script> 
</body> 
</html> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

打包下载
javascript缓冲效果实现代码推荐_javascript技巧

人气教程排行
