zoukankan      html  css  js  c++  java
  • Js+Div 层展开与层收起的一个例子

  • 又一个用JS控件DIV层的展开与折叠的功能,还带有点动画效果,可以用到一些软件介绍、明星介绍之类的,当点击详细查看的时候会全部显示出来,优酷网有这种类似效果,其实用起来很简单,不懂JS想念你也能搞定!
  • <html>
    <head>
    <title>可展开的一个DIV区域</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style>
    #content,#intro,{
    font: 13px/25px;
    200px;
    height: 40px;
    background: #eee;
    padding: 10px;
    border: 4px #ccc double;
    border-bottom:0;
    overflow: hidden;
    }

    #intro, {
    color: #036;
    font:12px;
            border: 4px #ccc double;
            border-top:0;
            height:70px;
    }
    #key{color:#900;float:right}
    hr{height:1px;border:1px #ccc dotted}
    </style>
    </head>
    <body>
    <script>
    var s=50;
    var minheight=70;
    var maxheight=445;
    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>
    <div id="content">
    一个站长:
    <br><br>
    当夜孤独的时候,<br>
    还可以抱着你。<br>
    那该有多幸福……<br>
    一个适应寂寞的人,<br>
    只要有你陪着我,<br>
    忽略心中那美丽的温存……<br>
    当我寂寞的时候还可以想着你……<br><br>
    我想说:<br>
    我是多么多么的爱你……<br>
    而你去什么也没感受到……<br>
    </div>
    <div id="intro"><hr>作者:乱言<span id="key" onclick="shoppingcat();">展开</span></div>
    </body>
    </html>

查看全文
  • 相关阅读:
    第二节:ts变量声明、通用js数据类型、ts新数据类型、ts类型补充
    第一节:TypeScript简介(特点、编译环境、运行模式)、基于webpack 或 ts-node运行ts详解
    第十七节:Vuex4.x 之Module详解(局部状态、命名空间、辅助函数等) 和 补充nexttick用法
    第十六节:Vuex4.x 简介及state、getters、mutations、actions详解(OptionApi 和 CompositionApi)
    第十五节:VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫
    第十四节:VueRouter4.x简介、基本用法、路由懒加载(打包分析)、动态路由、路由嵌套、相关Api
    第十三节:Vue3高级之 render/h函数、jsx、自定义指令、teleport、插件
    HTML让内部元素居中
    蓝桥杯 Web 应用开发模拟赛首次公开!参赛选手速进!
    蓝桥杯历年真题你刷了吗?过来人教你逆袭!
  • 原文地址:https://www.cnblogs.com/cnlmjer/p/4099863.html
  • Copyright © 2011-2022 走看看