javascript 特效實現(1)——展開選項和收起效果

時間 2019-11-12

標籤 javascript 特效實現展開選項收起效果欄目 JavaScript 简体版

原文原文鏈接

知識點：javascript事件；判斷當前展開收起狀態；延遲執行setTimeout方法。javascript

1.簡單的展開和收起效果：java

　　1.1 靜態結構HTML代碼分析jquery

　　　　body包含最外層的div id="pn"和按鈕 a id="btn" ,而包含div id="pn"包含一個p標籤和div id="hpn"（展開和收起部分）ide

<body>
    <div id="pn" class="pn">
        <p>分類：所有 電影 電視劇 綜藝</p>
        <div id="hpn" class="hpn">
            <p>地區：大陸 香港 美國 韓國 法國 英國</p>
            <p>類型：武俠 喜劇 冒險 戰爭 動畫</p>
            <p>時間：2016 2015 2014 2013 2012 2011 2010 </p>
        </div>
    </div>
    <a href="javascript:void(0);" id="btn" class="btn">展開選項+</a>
</body>

注意：<a>標籤中 href 屬性值 javascript:void(0) 能夠防止點擊連接跳轉。函數

　　1.2實現動態展開收起效果js代碼動畫

<script type="text/javascript">
        window.onload=function () {//加載完畢
            var hidediv=document.getElementById('hpn'),
                btn=document.getElementById('btn'),
                hflag=1;//標記是否隱藏
            btn.onclick=function () {
                if (hflag) {//當前爲收起狀態，展開函數
                    hidediv.style.display="block";
                    btn.innerHTML="收起選項-";
                    hflag=0;
                }else {//當前爲展開狀態，收起函數
                     hidediv.style.display="none";
                     btn.innerHTML="展開選項+";
                     hflag=1;
                }    
            }
        }
</script>

知識點：經過判斷hflag是真（1）或是假（0）判斷內容是展開仍是收起狀態，從而進行對應的操做。this

使用jquery(1.9如下版本)實現相同的效果，代碼以下idea

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
    $(function(){
        $("#btn").toggle(
            function(){
                $(this).text("收起選項-");
                $("#hpn").show();
            },
            function(){
                $(this).text("展開選項+");
                $("#hpn").hide();
            }
        )
    })
</script>

2.廣告自動展開，定時收起效果spa

　　2.1 靜態結構HTML代碼3d

<div id="adv" class="adv">
        <img src="images/adv.jpg" alt="廣告圖">
</div>

　　2.2 實現動態展開和定時收起效果js代碼

    function showadv() {//顯示廣告函數
        if(h<300){
            h+=5;
            adv.style.height=h+"px";
        }else{
            return;
        }
        setTimeout(showadv, 30);
    }
    showadv();//執行展開函數
    setTimeout(hideadv, 5000);//5秒後執行隱藏廣告函數
    function hideadv() {//收起廣告函數
        if(h>0){
            h-=5;
            adv.style.height=h+"px";
        }else{
            return;
        }
        setTimeout(hideadv, 30);
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。