内容的展开与收起效果

大幅广告的展开与收起：

复制代码
<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
复制代码

 

posted @   Bigdots  阅读(937)  评论(1)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae