網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>層和布局特效代碼>

JS層展開，默認是折疊狀態(tài)_層和布局特效

Js實現(xiàn)的層展開、層折疊效果，默認時候?qū)邮钦郫B的，點擊按鈕后才展開，以前有位朋友詢問過此問題，當(dāng)初因為忙沒能解決，希望這個效果能幫助那位朋友解決問題。

<html>
<head>
<title>JS展開層</title>
<script type="text/javascript">
function Scroll(obj, h, s){
    if(obj == undefined){return false;}
    var h = h || 200;
    var s = s || 1.2;
    var obj = typeof(obj)=="string"?document.getElementById(obj):obj;
    var status = obj.getAttribute("status")==null;
    var oh = parseInt(obj.offsetHeight);
    obj.style.height = oh;
    obj.style.display = "block";
    obj.style.overflow = "hidden";
    if(obj.getAttribute("oldHeight") == null){
        obj.setAttribute("oldHeight", oh);
    }else{
        var oldH = Math.ceil(obj.getAttribute("oldHeight"));
    }
    var reSet = function(){
        if(status){
            if(oh < h){
                oh = Math.ceil(h-(h-oh)/s);
                obj.style.height = oh+"px";
            }else{
                obj.setAttribute("status",false);
                window.clearInterval(IntervalId);
            }
        }else{
            obj.style.height = oldH+"px";
            obj.removeAttribute("status");
            window.clearInterval(IntervalId);
        }
    }
    var IntervalId = window.setInterval(reSet,10);
    return status;
}
window.onload= function(){
    document.getElementById('detail').onclick = function(){
        Scroll('detail', 300, 1.3);
    }
    document.getElementById('text').onclick = function(){
        Scroll('text');
    }
}
</script>
</head>
<body>
<p id="detail" style="border:1px dashed #f00;">一行文字……</p>
<div id="text" style="border:1px solid #0f0">Welcome to www.ghpqjb.com，請點一下</div>
<button onclick="Scroll('text', 400, 1.2)">點擊展開</button>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-11-16

[收藏][報錯][返回列表]

相關(guān)層和布局特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

JS層展開，默認是折疊狀態(tài)_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些