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

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

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

以下为详细代码

<!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)

后一页:记录滚动条位置

相关阅读: 连云港华夏国际旅行社; sql语句中怎么按照in语句里的id原有的顺序进行排序输出,可以做成浏览记录、查看、观看记录; css翻页代码; ASP过滤SQL中的非法字符并格式化相关的html代码; 深山旅行社网站管理系统 v1.6; asp中qequest读取优先级顺序（通过优化之后提高速度）; Object.assign的一些用法; 当鼠标移到图片上时会发生梦幻般轮流变化的图片特效

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; 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还有其它的吗

更多>>随机抽取信息: 昌平欢乐之旅旅行社; 许愿墙开始重新设计。; 自适应高度textarea(文本框); 利用JAVAscript实现表格渐变; 旅行社管理系统商业版4.0发布; 旅行社手机网站模板12

更多标签热门标签

论坛转换 126 textarea border 展开 ctrl 记录分开 Google 倒计时翻页 skype FTP XMLHTTP 界面 qq right Cookie 珍惜 box 初级故事版权声明工作室采集预览左右 optgroup 购物 title 淘宝成功下拉代码幻灯绝对定位柱状图火狐 IP 凹陷文字样式杈规 添加 mssql 游览器 asp.net function 渐变 div 计算