javascript缓冲效果实现代码推荐_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:44:22
javascript缓冲效果实现代码推荐_javascript技巧

javascript缓冲效果实现代码推荐_javascript技巧:菜鸟版代码如下:理解这段代码就基本上掌握了代码如下:function f_s() { var obj = document.getElementById(top); obj.style.display = block; obj.style.height = 1px; var sw = function () { var
推荐度：
点击下载本文 文档为doc格式
导读javascript缓冲效果实现代码推荐_javascript技巧:菜鸟版代码如下:理解这段代码就基本上掌握了代码如下:function f_s() { var obj = document.getElementById(top); obj.style.display = block; obj.style.height = 1px; var sw = function () { var
菜鸟版代码如下:

理解这段代码就基本上掌握了 
 代码如下:
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); 
}

 
<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> 
 
 
<h2>缓冲效果</h2> 
打开这是一个由快到慢的过程关闭<br> 
打开这是一个由慢到快的过程关闭 
 
 
 
 
 
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; 
}

 
<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="小秦" /> 
 
/* 
函数名称: 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><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script> 
Hello World!
你敢点我不 -_||| 
<button onclick="Scroll('text', 400, 1.2)">Hello World</button> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
高级版本 
这个很全,不过,我是没有看懂的.- -!! 
http://www.cnblogs.com/cloudgamer/
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Tween</title> 
</head> 
<body> 
 
 
 
 
 
 
 
 
 
 
<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 " /> 
 
 
/* 
算法来源：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>'); 
 } 
 $("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技巧

推荐度：
点击下载本文 文档为doc格式
标签：技巧实现 js
热门焦点
javascript缓冲效果实现代码推荐_javascript技巧

javascript缓冲效果实现代码推荐_javascript技巧

javascript缓冲效果实现代码推荐_javascript技巧

最新推荐

猜你喜欢

热门推荐
