菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: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 } 缓冲效果 打开这是一个由快到慢的过程关闭 打开这是一个由慢到快的过程关闭 [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; } 层展开/关闭 - 运动缓冲效果 这是一个段落啦!!哇哈哈哈 点我一下下啦:) 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 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]打包下载

　　推荐阅读

　　JavaScript 中级笔记 第一章

一，回顾 首先先来回顾下DOM和事件。 1，DOM DOM在JavaScript中是应用最广泛的，大部分Web开发的编程语言都提供了相关的实现。给了开发者一个统一的接口。 看下面的例子: demo 李老师-英语 张老>>>详细阅读

本文标题：javascript 缓冲效果实现代码 推荐

地址：http://www.17bianji.com/kaifa2/JS/28121.html

 1/2    1