层展开/关闭 - 运动缓冲效果 -- [页面特效]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

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

http://bbs.blueidea.com 2009/4/26 20:10:01 深山行者字体:大中小浏览 6634

以下为详细代码

<!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="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;">这是一个段落啦!!哇哈哈哈<br/>点我一下下啦:)</p>
<div id="text" style="border:1px solid #0f0">Hello World!<br/>你敢点我不  -_|||</div>
<button onclick="Scroll('text', 400, 1.2)">Hello World</button>
</body>
</html>

前一页:漂亮的页面loading等待页面特效(3)

后一页:记录滚动条位置

相关阅读: uni-app实现tab选项卡; 让asp立即输出缓存（Response.flush），实时显示进度; 邓州市途鸿旅行社; 防止 IE 浏览器被黑的技巧十则; uni-app基础知识列表渲染; 超级实用且不花哨的js代码大全( 7 ); 沙漠玫瑰旅行社; 实现windows关机效果代码

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery下拉到某个固定位置然后某些元素发生改变样式状态; canvas绘制的文字如何换行; 兼容pc、移动端用js实现复制内容到剪切板（支持苹果safari浏览器）; js兼容多个浏览器右下角漂浮广告; 兼容ie6+和火狐的禁止右键; 做在线客服时，聊天窗口的div滚动条始终在底部

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 一个简单的用java写的非常不错的贪食蛇游戏; 旅行社管理系统商业版3.0发布; 河南省中国青年旅行社; ASP.NET常用的三十三种实用代码(中); 利用javascript高亮关键词并且加上链接系列 2; 默认系统

更多标签热门标签

数据库文字样式市倒计时左右底部禁止标注伪类广告文本背景像素变化 checkbox 字母 dw 访问量企业 css 透明 hover 注册工作表达 dl 我想你方法九宫格系统选择框 tag 调节程序爱墙建立日期限制 javascript 斜线 flash 透明表达式绝对管用的iis安装包下载 cpu Google 邮箱手 imprt 获得 adobe 技巧经典的屏幕