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

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

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

以下为详细代码

<!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开发表单input组件的一些规则说明自己预留使用; 非常不错的支持各种浏览器的简易调色板; macromedia dreamweaver 平均分布单表格宽度与高度mxp插件下载; Javascript JS 限制复选框的选择个数(2); 使用uiautomatorviewer连接模拟器页面报错：Error while obtaining UI hierarchy XML file; 屏幕两种色彩左右像电影屏幕一样分开; 以前的QQ强聊不管了，这个是非常管用的QQ强聊; jquery中动态生成的代码使用on hover事件时不出现效果

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

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

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

更多>>随机抽取信息: 我爱敦煌网; document对象详解; 复选框添加，删除信息，过滤重复; 旅游网站的企业站自定义功能完成。; 山西省青年旅行社; 利用java使图片左右上下循环连续滚动不出现空白

更多标签热门标签

十字 height 时间浮动 textarea 翻页首页计划查询 input DropShadow 图片彩色 asp 读取模式防止上下左右 ie5.5 旅行社 lightbox 忧化项目断线 pt 案例文件夹 VBScript 文化营销轮流显示背景色阴影效果 Application 渐变 rss 汉字 clear 比例 163 边界重叠蜘蛛设计调用 dreawmeaver 墙导出关键词幻灯