注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

引用 滑动层展开效果   

2015-06-22 10:37:55|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自我心依旧《滑动层展开效果》
<!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 runat="server">
    <title>无标题页</title>
    <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(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>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <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>
        </div>
    </form>
</body>
</html>

  评论这张
 
阅读(11)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018