<script type="text/javascript">
function changeDivDown(){//此为向下展开div的方法
var d = document.getElementById("TLDiv");
var h = d.offsetHeight;
var maxh=250;
function dmove(){
h+=5;//展开的速度
if(h>=maxh){
d.style.height='250px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);//定时调用方法
}
function changeDivUp(){//此为div向上隐藏的方法
var d = document.getElementById("TLDiv");
var h = d.offsetHeight;
var maxh=250;
function dmove(){
h-=5;//隐藏的速度
if(h<=50){
d.style.display='block';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);定时调用方法
}
</script>
<div id="TLDiv" style="width: 960px;height: 250px;margin-bottom: 10px;overflow: hidden;border:1px solid red;">
隐藏/展开 的div的内容
</div>
<input type="button" value="展开" onclick="changeDivDown()"/>
<input type="button" value="收缩" onclick="changeDivUp()"/>
分享到:
相关推荐
jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示 jquery hover事件鼠标悬停导航条浮动div层滑动高亮显示
本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。
<div class="nav-back"></div> <div class="nav"> <div class="on">餐饮</div> <div>电商</div> <div>旅游</div> <div>汽车</div> <div>美容</div> <div>新闻</div> <div>家居</div> <div>健康</...
因为安卓不支持原生的橡皮筋效果,而且安卓在div内的滑动效果很差,所以上述组件应该这样实例化: var outer = ( isAndroid // do it yourself ? 'wrapper' : 'container' ); var list = [outer]; var prevent = ...
使用JQUERY做的一个页面DIV动态隐藏 显示 点击+号图片后 DIV会自动隐藏 点击-号图片后 DIV会自动显示 隐藏的DIV区域内的控件值后台仍可以取得到,当页面刷新时,也不会改变隐藏区域的隐藏状态 使用JQUERY将页面状态...
div 移动 网页 webapp 左右滑动 滑动 swipe
<div class="TabContent"> <div id="myTab0_Content0"> 欢迎访问:<a href="http://www.alixixi.com" target="_blank">阿里西西WEB开发 </a></div> <div id="myTab0_Content1" class="none"><a href="http://...
鼠标滑动到容器上时,div跟随;鼠标滑动到容器上时,div跟随;鼠标滑动到容器上时,div跟随;鼠标滑动到容器上时,div跟随;
见过Ext的panel滑动隐藏效果(点击panel右上角小三角图标实现的那个效果)吗,该功能是通过深入解读Ext源码后,实现的div滑动隐藏效果,代码简洁,极为经典,方便追求效果的前台爱好者们研究。 想要的快来下,5分...
纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存
两个div在一个父div中左右滑动,在一个页面分为登录注册两个div。
点击按钮(a标签)隐藏显示div内容,切换div内容
jquery+js打造div滑动效果,淡入淡出,隐藏与显示。
css + div 滑动弹出div效果,可自定义弹出效果。
在DIV中图片垂直/水平居中(最简单方法)
div实现iframe的框架左侧隐藏与显示实例;代码非常简单;分享给大家
html css 编写的移动端时刻表代码,纵向排列,卡片形式,点击车程在下方显示出详细路线,避免了页面跳转加载缓慢问题,点击一个div显示/隐藏另一个div,排版简洁大方,蓝白配色
JS实现各种动态显示隐藏div效果,包括卷动显示隐藏效果,渐变显示隐藏效果,大小缩放显示隐藏效果
div显示隐藏效果