zoukankan      html  css  js  c++  java
  • 内容的展开与收起效果

    大幅广告的展开与收起:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>展开与收起效果</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                width: 730px;
                margin: auto;
            }
            #banner{
                height: 336px;
                overflow: hidden;
            }
    
            p{
                line-height: 30px;
                text-align: center;
            }
        </style>
    
        <script>
            var h=0;
            function addH(){
                var banner=document.getElementById('banner')
                if(h<336){
                    h+=10
                    banner.style.height=h+'px'
                }else{
                    return
                }
                setTimeout(addH,50)
            }
            window.onload=function(){
                addH();
            }
            function removeH(){
                var banner=document.getElementById('banner')
                if(h>0){
                    h-=10
                    banner.style.height=h+'px'
                }else{
                    // banner.style.display='none'
                    return
                }
                setTimeout(removeH,50)
            }
            window.onload=function(){
                addH();
                setTimeout(removeH,5000)
            }
        </script>
    </head>
        <div id='banner'><img src='images/1.jpg'></div>
        <p>正文</p>
    
    <body>
    
    </body>
    
    </html>
    View Code

    商品信息展示的展开与收起

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>展开与收起效果</title>
        
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 400px;
            height: auto;
            margin: 0 auto;
            border:1px solid #666;
        }
    
        #hdn{
            height: 50px;
            width: 400px;
            background: red;
        }
        a{
            display: block;
            height: 30px;
            background: #ccc;
            margin: 0 auto;
            width: 50px;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
        }
        </style>
    
        <script>
            function showDiv(){
                var hrf=document.getElementById('hrf')
                var hdn=document.getElementById('hdn')
                hdn.style.display='block';
                hrf.innerHTML='收起-';
                hrf.href='javascript:hiddenDiv()'
            }
            function hiddenDiv(){
                var hdn=document.getElementById('hdn')         //这个变量申明不能放于外部
                var hrf=document.getElementById('hrf')
                hdn.style.display='none';
                hrf.innerHTML='展开+';
                hrf.href='javascript:showDiv()'
    
            }
        </script>
    </head>
    <body><div id='content'>
                <p>展开与收起效果展开与收起效果展开与收起效果展开与收起效果展开与收起效果</p>
                <div id='hdn' style='display:none'>
                    <p>展开与收起效果展开与收起效果展开与收起效果展开与收起效果展开与收起效果</p>
                </div>
            </div>
            <p><a id='hrf' href='javascript:showDiv()'>展开+</a></p>                 //可以通过这样引用函数
    
    </body>
    </html>
    View Code

    阅读文章的展开与收起

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>展开与收起效果</title>
        
        <style>
        *{
            margin: 0;
            padding: 0;
        }
        #content{
            width: 400px;
            height: auto;
            margin: 0 auto;
            border:1px solid #666;
        }
    
        #hdn{
            height: 50px;
            width: 400px;
            background: red;
        }
        a{
            display: block;
            height: 30px;
            background: #ccc;
            margin: 0 auto;
            width: 50px;
            line-height: 30px;
            text-align: center;
            text-decoration: none;
        }
        </style>
    
        <script>
            function showDiv(){
                var hrf=document.getElementById('hrf')
                var hdn=document.getElementById('hdn')
                hdn.style.display='block';
                hrf.innerHTML='收起-';
                hrf.href='javascript:hiddenDiv()'
            }
            function hiddenDiv(){
                var hdn=document.getElementById('hdn')         //这个变量申明不能放于外部
                var hrf=document.getElementById('hrf')
                hdn.style.display='none';
                hrf.innerHTML='展开+';
                hrf.href='javascript:showDiv()'
    
            }
        </script>
    </head>
    <body><div id='content'>
                <p>展开与收起效果展开与收起效果展开与收起效果展开与收起效果展开与收起效果</p>
                <div id='hdn' style='display:none'>
                    <p>展开与收起效果展开与收起效果展开与收起效果展开与收起效果展开与收起效果</p>
                </div>
            </div>
            <p><a id='hrf' href='javascript:showDiv()'>展开+</a></p>                 //可以通过这样引用函数
    
    </body>
    </html>
    View Code
  • 相关阅读:
    Python机器学习算法 — 关联规则(Apriori、FP-growth)
    Python数据存储 — MySQL数据库操作
    Python机器学习算法 — 朴素贝叶斯算法(Naive Bayes)
    七大查找算法(Python)
    react-redux源码学习
    理解webpack4.splitChunks
    redux、immutablejs和mobx性能对比(一)
    前端初探 Gitlab CI/CD
    React SPA 应用 hash 路由如何使用锚点
    理解webpack4.splitChunks之其余要点
  • 原文地址:https://www.cnblogs.com/yzg1/p/4465838.html
Copyright © 2011-2022 走看看