JS层展开，默认是折叠状态_层和布局特效

Js实现的层展开、层折叠效果，默认时候层是折叠的，点击按钮后才展开，以前有位朋友询问过此问题，当初因为忙没能解决，希望这个效果能帮助那位朋友解决问题。

<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.mb5u.com，请点一下</div>
<button onclick="Scroll('text', 400, 1.2)">点击展开</button>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-11-16

[收藏][报错][返回列表]

JS层展开，默认是折叠状态_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些