javascript 缓冲效果实现代码推荐- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 缓冲效果实现代码推荐

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript 中的 javascript 缓冲效果实现代码推荐

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 474 ::

收藏到网摘: n/a

ExtJS 配置和表格控件使用 html数组字符串拼接的最快方法

缓冲效果就是实现一个页面的由慢到快或由快到慢的过程。菜鸟版代码如下:
理解这段代码就基本上掌握了

复制代码代码如下:

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

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

中级版本

复制代码代码如下:

/* 
函数名称: 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;">这是一个段落啦!!哇哈哈哈
点我一下下啦:)
<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 全选提示:你可先修改部分代码,再按运行]

高级版本
这个很全,不过,我是没有看懂的.- -!!
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> 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> 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>
<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 全选提示:你可先修改部分代码,再按运行]

打包下载

ExtJS 配置和表格控件使用 html数组字符串拼接的最快方法

Javascript 中的 javascript 缓冲效果实现代码 推荐

评论 (0) All

Javascript 中的 javascript 缓冲效果实现代码推荐