设为首页设为首页
 添加收藏添加收藏
 进入音乐版音 乐 版
  汉南在线网页设计HTML/CSS

自动往下伸展开和收缩的动态图层效果
作  者:匿名
关键字:CSS、DIV



<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;
}
</style>
<script>
var s=5;
var minheight=50;
var maxheight=400;
function shoppingcat(){
 var key = document.getElementById("key").innerText;
 if(content.style.pixelHeight==0)content.style.pixelHeight=minheight;
 if(key=="展开"){
  content.style.pixelHeight+=s;
  if(content.style.pixelHeight<maxheight){
   setTimeout("shoppingcat();",1);
  }else{
   document.getElementById("key").innerText="关闭";
  }
 }else{
  content.style.pixelHeight-=s;
  if(content.style.pixelHeight>minheight){
   setTimeout("shoppingcat();",1);
  }else{
   document.getElementById("key").innerText="展开";
  }
 }
}
</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>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>


来源:网络
阅读:82
日期:2008-5-12

【 双击滚屏 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体: 】 
上一篇:值得收藏的带自动选项卡生成的后台管理界面
下一篇:不用圆角图片制作的圆角效果

  >> 相关文章
 
  ·值得收藏的带自动选项卡生成的后台管理界面
  ·仿网易div+css滑动门选项卡效果
  ·用css制作扑克牌
  ·一个简单的网页选项卡效果菜单
  ·CSS+JS实现的选项卡效果(html组件)
  ·windows选项卡效果(网页展示应用版)
  ·纯CSS网页选项卡效果
  ·div+css命名规则-增强SEO
授权使用:汉南在线 http://www.hzwz.net/(2008-2009)   
Copyright (c) 2002-2007 汉南在线. All Rights Reserved . 
经营许可证:陕ICP备05000109号 Powered by:汉南在线