JavaScript实现区块合拢和展开效果

2008-11-07 12:43:00 | 【大中小】

点击下面的“展开”按钮

孤雁儿展开

世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。

藤床纸帐朝眠起，
说不尽、无佳思。
沈香烟断玉炉寒，
伴我情怀如水。
笛声三弄，
梅心惊破，
多少春情意。

小风疏雨萧萧地，
又催下、千行泪。
吹箫人去玉楼空，
肠断与谁同倚？一枝折得，
人间天上，
没个人堪寄。

定义一个区域，点击展开按钮，区域展开，点击关闭按钮，区域合拢，中间带有动画效果，不支持FireFox

查看全部代码 View Code

第一步：
在网页<head>区添加以下代码

<style>
#content {
 font-size: 14px;
 width: 200px;
 height: 50px;
 background: #eee;
 padding: 10px;
 border: 4px #ccc double;
 overflow: hidden;
}
#key {
 color: red;
 float: right;
 margin-top: -20px;
}
span{cursor:pointer;}
</style>

第二步：
在网页<body>区添加以下脚本定义及显示内容


<script>

        /*****************************************************
         *  Share JavaScript (http://www.ShareJS.com)
         * 使用此脚本程序，请保留此声明
         * 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
         ******************************************************/
    
var s=5;
var minheight=50;
var maxheight=400;
function shoppingcat(){
  var content=document.getElementById("content");
  var key = document.getElementById("key");
  var t=content.style;
  if(t.height==""||t.height==0)
    t.height=minheight;
  var h=parseInt(t.height);
  if(key.innerHTML=="展开"){
    h+=s;
    t.height=h+"px";
    if(h<maxheight){
      setTimeout("shoppingcat();",1);
    }else{
      key.innerHTML="关闭";
    }
  }else{
    h-=s;
    t.height=h+"px";
    if(h>minheight){
      setTimeout("shoppingcat();",1);
    }else{
      key.innerHTML="展开";
    }
  }
}
</script>
<div id="content"> 
孤雁儿
<span id="key" onclick="shoppingcat();">展开</span><br><br>
世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br>
藤床纸帐朝眠起，<br> 
说不尽、无佳思。<br>
沈香烟断玉炉寒，<br>
伴我情怀如水。<br>
笛声三弄，<br>
梅心惊破，<br>
多少春情意。<br><br>
小风疏雨萧萧地，<br>
又催下、千行泪。<br>
吹箫人去玉楼空，<br> 
肠断与谁同倚？
一枝折得，<br>
人间天上，<br>
没个人堪寄。
</div>

修改 key.innerHTML=="展开" ，可以把文字按钮换成图片

下载"JavaScript实现区块合拢和展开效果"

推荐给朋友

上一篇： JavaScript实现内容从下往上连续滚动效果
下一篇：一个从右向左无缝滚动的代码

JavaScript实现区块合拢和展开效果

下载"JavaScript实现区块合拢和展开效果"

相关资源