div显示隐藏效果

最新推荐文章于 2022-02-25 08:40:16 发布

岁寒松柏

最新推荐文章于 2022-02-25 08:40:16 发布

阅读量812

点赞数

分类专栏： div+css

div+css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

div显示隐藏效果
http://bbs.blueidea.com/thread-2755132-1-1.html
自己看了一下别人的一些代码，自己也学着做了个，一直知道这种层显示隐藏效果最关键的地方就是应用暂停（setTimeout及clearTimeout）或是时间间隔（setInterval及clearInterval）成对应用制作成的。如果在执行一组指定的代码前等待一段时间，则使用暂停。如果要反复执行某些代码，就使用时间间隔。这个基本上是原理了。
再者，就是很多人在制作页面时，都喜欢用font-size:12px;来限制字体的大小，感觉这个是一个设计的错误，因为用户不能使用浏览器的文字大小功能对文字进行调解，不利于年纪大的人浏览，所以我使用了font:75% Verdana, Arial, Helvetica, sans-serif;百分比字体。这样如果别人感觉字体小就可以调整大小了，而且这个设置恰好是12像素的字体大小。呵呵，在做项目时突然发现的。如果有知道的，请多给些宝贵建议，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div动画显示</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:300px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //设置层展开的速度
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none'){
$D();
sb.innerHTML='展开';
}else{
$D2();
sb.innerHTML='收缩';
}
}
</script>
</head>
<body>
<div class="class1">
<h1>靠自己</h1>
展开
小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？ 
妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！ 
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ 
妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ 
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 
小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 
蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。
</div>
</body>
</html>

代码执行效果在ie下有点不流畅，在firefox下测试流畅，希望各位兄弟姐妹帮我也改改试试，使在ie下流畅起来

对上面的class1content选择器样式进行了修改，加了overflow:hidden，谢谢test0236四楼的老兄
大家可以更改速度来激发自己的想像力，创造更多的不一样的效果

发现一个问题：目前在实际应用中，innerHTML是现实的标准firefox,IE都支持，innerText只有IE支持，firefox使用的是标准的W3C标准textContent 。所以我把上面的innerText替换为innerHTML

---------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>展开折叠例子</title>
<style>
 /*公共设置*/
 html{ border:0;}
 body{ background:#fff;}
 ul,dl{ list-style-type:none;}
 body,form,ul,li,dl,dt,dd{ margin:0; padding:0;}
 body,div,li,dt,dd{ font-family:宋体,sans-serif; font-size:12px; color:#333; word-break:break-all;}
 /*布局设置*/
 .main{ width:960px; margin:auto; overflow:hidden;}
 .left200{ width:200px; float:left;}
 /*版块一设置*/
 #titleone{ width:100%; overflow:hidden; background:url('http://www.bbobb.cn/images/list1b.gif') no-repeat 180px 5px #80BFFF;}
 #titleone dt{ float:left; width:75%; height:18px; padding-top:7px; text-indent:12px;}
 #titleone dd{ float:right; width:25%; height:18px; padding-top:7px;}
 #bodyone{ border:solid 1px #80BFFF; height:0px; overflow:hidden;}
 #bodyone div{ padding:5px;}
</style>
<script>
 var h = 200;//设置高度
 var s = 1;//设置速度
 function zk()
 {
 var el = document.getElementById("bodyone");
 if(parseInt(el.currentStyle.height) < h)
 {
 el.style.height = (parseInt(el.currentStyle.height) + 2) + "px";
 setTimeout(zk, s);
 }
 }
 function ss()
 {
 var el = document.getElementById("bodyone");
 if(parseInt(el.currentStyle.height) > 0)
 {
 el.style.height = (parseInt(el.currentStyle.height) - 2) + "px";
 setTimeout(ss, s);
 }
 }
 function zkss()
 {
 var el = document.getElementById("bodyone");
 if(parseInt(el.currentStyle.height) == 0)
 {
 zk();
 document.getElementById("titleone").style.background = "url('http://www.bbobb.cn/images/list1a.gif') no-repeat 180px 5px #80BFFF";
 }
 if(parseInt(el.currentStyle.height) == h)
 {
 ss();
 document.getElementById("titleone").style.background = "url('http://www.bbobb.cn/images/list1b.gif') no-repeat 180px 5px #80BFFF";
 }
 }
 window.onload = function()
 {
 document.getElementById("titleone").onclick = zkss;
 }
</script>
</head>
<body class="main">
 <div class="left200">
 <dl id="titleone">
 <dt>展开折叠例子</dt>
 <dd></dd>
 </dl>
 <div id="bodyone">
 <div>

当某个事情是不被允许的时候我们不应该在这个点上集中力量弄到两败巨伤，尤其是这个问题本身对整个舆论发展方向不起决定性作用的时候。当这个不被允许，我们可以迅速转移战线。比如政治不允许谈论我们可以谈论戈尔巴乔夫屁股的分裂以及性和色情。当性和色情不可以谈论的时候我们转回讨论恶搞，当恶搞不被允许的时候我们迅速转移战场做网络暴民打老虎。

</div>
 </div>
 </div>
</body>
</html>

岁寒松柏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div显示隐藏效果

div显示隐藏效果http://bbs.blueidea.com/thread-2755132-1-1.html自己看了一下别人的一些代码，自己也学着做了个，一直知道这种层显示隐藏效果最关键的地方就是应用暂停（setTimeout及clearTimeout）或是时间间隔（setInterval及clearInterval）成对应用制作成的。如果在执行一组指定的代码前等待一段时间，则使用暂停
复制链接

扫一扫

专栏目录