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


代码如下:

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

缓冲效果

* { 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
}

缓冲效果

打开这是一个由快到慢的过程关闭

打开这是一个由慢到快的过程关闭

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

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

层展开/关闭 - 运动缓冲效果

/*
函数名称: 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

这是一个段落啦!!哇哈哈哈
点我一下下啦:)

Hello World!
你敢点我不 -_|||

Hello World

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

高级版本
这个很全,不过,我是没有看懂的.- -!!
http://www.cnblogs.com/cloudgamer/

Tween

Tween类型：

Linear

Quadratic

Cubic

Quartic

Quintic

Sinusoidal

Exponential

Circular

Elastic

Back

Bounce

ease类型：

easeIn

easeOut

easeInOut

/*
算法来源：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) ');
}
$("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 = "减慢速度";
}
}

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

打包下载

您可能感兴趣的文章:

• JavaScript实现的Tween算法及缓冲特效实例代码
• JavaScript中的匀速运动和变速(缓冲)运动详细介绍
• javascript 缓冲效果 实现代码
• javascript 层展开/关闭，带缓冲效果
• JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
• javascript实现列表滚动的方法
• javaScript实现滚动新闻的方法
• javascript实现状态栏文字首尾相接循环滚动的方法
• 纯javascript实现四方向文本无缝滚动效果
• JavaScript实现滚动栏效果的方法
• JavaScript控制网页平滑滚动到指定元素位置的方法
• JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

Tags：javascript 缓冲效果

相关文章

• 2007-03-03JavaScript判断两种格式的输入日期的正确性的代码
• 2017-05-05ES6正则表达式的一些新功能总结
• 2012-08-08js三种排序算法分享
• 2014-06-06js图片滚动效果时间可随意设定当鼠标移上去时停止
• 2014-02-02javascript中的undefined和not defined区别示例介绍
• 2013-12-12判断文件是否正在被使用的JS代码
• 2016-02-02JSON简介以及用法汇总
• 2017-07-07用javascript获取任意颜色的更亮或更暗颜色值示例代码
• 2016-07-07js只执行1次的函数示例
• 2016-01-01JS运动相关知识点小结(附弹性运动示例)

最新评论