javascript 缓冲效果实现代码推荐

2020-05-12 我要评论

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

#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></div> 
<div> 
<h1>缓冲效果</h1> 
<a href="javascript:void(0)" onclick="f_s();">打开</a>这是一个由快到慢的过程<a href="javascript:void(0)" onclick="close_f_s('top','350px')">关闭</a><br> 
<a href="javascript:void(0)" onclick="s_f();">打开</a>这是一个由慢到快的过程<a href="javascript:void(0)" onclick="close_f_s('top0','350px')">关闭</a> 
<div></div> 
<div></div> 
</div> 
<div></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";

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);

</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>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> 
<div> 
<div></div> 
</div> 
<div> 
<div> </div> 
<div></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*thttps://img.qb5200.com/download-x/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=thttps://img.qb5200.com/download-x/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=thttps://img.qb5200.com/download-x/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=thttps://img.qb5200.com/download-x/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(thttps://img.qb5200.com/download-x/d * (Math.PI/2)) + c + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return c * Math.sin(thttps://img.qb5200.com/download-x/d * (Math.PI/2)) + b; 
        }, 
        easeInOut: function(t,b,c,d){ 
            return -c/2 * (Math.cos(Math.PI*thttps://img.qb5200.com/download-x/d) - 1) + b; 
        } 
    }, 
    Expo: { 
        easeIn: function(t,b,c,d){ 
            return (t==0) ? b : c * Math.pow(2, 10 * (thttps://img.qb5200.com/download-x/d - 1)) + b; 
        }, 
        easeOut: function(t,b,c,d){ 
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * thttps://img.qb5200.com/download-x/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=thttps://img.qb5200.com/download-x/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=thttps://img.qb5200.com/download-x/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 Chart(){ 
    var a = []; 
    for (var i = 0; i < iChart; i++) { 
        a.push('<div><\https://img.qb5200.com/download-x/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(); } })

$("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 缓冲效果实现代码 推荐

相关文章

猜您喜欢

今日热门

javascript 缓冲效果实现代码推荐