教程集 > 脚本编程 > javascript > 正文层展开/关闭 - 运动缓冲效果三

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

发布时间：2023-06-13 编辑：jiaochengji.com

教程集为您提供层展开/关闭 - 运动缓冲效果三等资源，欢迎您收藏本站，我们将为您提供最新的层展开/关闭 - 运动缓冲效果三资源

提示：您可以先修改部分代码再运行

<!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){ var h = h || 200; var s = s || 1.2; var obj = typeof(obj)=="string"?document.getElementById(obj):obj; if(obj == undefined){return false;} 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(){ var $ = function(id){return document.getElementById(id)}; $('menu').onclick = function(){ Scroll('menu',this.scrollHeight,1.2); } $('test').onclick = function(){ Scroll('test',300,1.2); } } </script> </head> <body> <div id="test" style="border:1px solid #f00;width:200px">单击后 展开指定高度 300px</div> <div id="menu" style="position:absolute;top:10px;left: 400px;border:1px solid #ccc;width:160px;height:16px;text-align:center;cursor:pointer;overflow:hidden;"> 单击后 根据展开的高度根据内容而变 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </div> </body> </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
PHP基础之输出缓冲区基本概念、原理分析
 网站顶部带缓冲打开和关闭功能的横栏提示层js代码
 php函数ob_start()、ob_end_clean()、ob_get_contents()
php输出缓存ob系列函数用法
 PHP输出缓冲及其应用的例子
 采用PEAR来缓冲PHP程序
 js展开收缩层的效果
 谈PHP生成静态页面
 php的flush和ob_flush无效问题解决办法
 PHP生成静态页面的方法

上一篇：仿网易文章关键字效果下一篇：层展开/关闭 - 运动缓冲效果二

[关闭]

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

最近更新

浏览排行