div上下展开收缩 html,js实现div层缓慢收缩与展开的方法

本文实例讲述了js实现div层缓慢收缩与展开的方法。分享给大家供大家参考。具体分析如下：

这是一个层伸缩与展开的特效代码，带有点动画效果，缓慢展开，DIV+JS联合打造，看上去还不错。不受内容约束，收缩与展开的速度是可以控制的，高度、循环时间也可以改。

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

层收缩

var mh = 30;//高度

var step = 1;//每次变化的量

var ms = 10;//循环时间

function toggle(o){

if (!o.tid)o.tid = "_" + Math.random() * 100;

if (!window.toggler)window.toggler = {};

if (!window.toggler[o.tid]){

window.toggler[o.tid]={

obj:o,

maxHeight:o.offsetHeight,

minHeight:mh,

timer:null,

action:1

};

}

o.style.height = o.offsetHeight + "px";

if (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);

window.toggler[o.tid].action *= -1;

window.toggler[o.tid].timer = setTimeout("anim('"+o.tid+"')",ms );

}

function anim(id){

var t = window.toggler[id];

var o = window.toggler[id].obj;

if (t.action < 0){

if (o.offsetHeight <= t.minHeight){

clearTimeout(t.timer);

return;

}

else{

if (o.offsetHeight >= t.maxHeight){

clearTimeout(t.timer);

return;

}

o.style.height = (parseInt(o.style.height, 10) + t.action * step) + "px";

window.toggler[id].timer = setTimeout("anim('"+id+"')",ms );

}

div.xx{

border:solid 1px;overflow:hidden;

}

div.xx h5{

border:solid 1px;border-width:0 0 1px;

padding:0;margin:0;height:28px;

line-height:30px;cursor:pointer;

background:#eee;

}

点击此处层伸缩

Tomat6.0的配置视频教程，AVI电影格式，相当清淅了，比起图文版的教程更贴切，

不会配置Tomcat的网友，你可不要错过哦，由于视频抓图挺麻烦的，

试了多次还是抓了一个不太清淅的，大家将就吧。

希望本文所述对大家的javascript程序设计有所帮助。

div上下展开收缩 html,js实现div层缓慢收缩与展开的方法相关推荐

element select 自动展开_原生js 让select下拉框自动展开可用size 属性来代替展开动作...
找遍全网都没一个比较好的例子!!! 什么获得焦点事件,或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法 size 属性规定下拉列表中可见选项的数目. 如果 size 属性 ...
html 获得div的高度,如何用js获取div不确定的自适应高度（currentStyle与offsetHeight）...
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度. 对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两 ...
php 张开收缩显示,js实现可以点击收缩或张开的悬浮窗
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下说明:点击"+"按钮,悬浮窗收缩/展开思路 1.在html中定义一个div块,定一个id:一个按钮,点击时 ...
解决JS在controll层定义带循环的公共方法，组件中调用时取不到返回值的问题
问题描述:下拉列表中,点击一个子节点,获取父节点的Id. 如果将方法直接写在组件内调用,完全ok的. 如果将方法提取到外层,想公用的话,组件内调用会出现方法中已经拿到值,但是页面调用时取不到返回值: ...
html判断隐藏显示,js 判断DIV是否隐藏的方法
js脚本在控制div元素在显示与隐藏之间进行切换时,如果不能确定div当前的状态,切换时往往会发生一些逻辑错误的事情,导致div元素的动态效果在切换时不是很流畅.那么飞鸟慕鱼博客就来说一说,如何判断d ...
原生js设置div隐藏或者显示_用js控制div的显示与隐藏
功能介绍:要实现一个div的显示与隐藏,方法有很多,这里记录下一个简单的js效果,用js来控制div的显示与隐藏,示例代码如下: js显示隐藏层 function showdiv(targetid,o ...
js如何获取div下面的input_原生 js 如何获取宽高
foreword(前言) 首先,非常抱歉太长时间没有更新专栏了,这两三个月一直在处理人生两大重要的事...闲话少说,进入正题. 最近项目中需要获取 dom 元素的尺寸,所以借此对比分析一下 js 所有 ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
js获取DIV的位置坐标的三种方法！
js获取DIV的位置坐标的三种方法! 方法一: var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect( ...

div上下展开收缩 html,js实现div层缓慢收缩与展开的方法

点击此处层伸缩

div上下展开收缩 html,js实现div层缓慢收缩与展开的方法相关推荐

最新文章

热门文章