js鼠标点击展开收起特效(带缓动效果)

最新推荐文章于 2022-07-20 14:10:24 发布

yzlghb520

最新推荐文章于 2022-07-20 14:10:24 发布

阅读量3.4k

点赞数

分类专栏：网页特效文章标签： function class null

网页特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这款网页特效还不错兼容性很好！大气阿

转自: JS特效

代码如下

<html>
<head>
<title>鼠标点击展开收起效果(带缓动效果)-网页特效代码</title>
<style type="text/css">
.box{width:300px;border:1px solid #ccc;font-size:12px}
.box dt{line-height:24px;text-align:right;margin:0;padding:0 10px;background:#CCC}
.box dd{line-height:20px;margin:0}
#holder2{height:200px}
</style>
</head>
<body>
<dl class="box">
    <dt id="title">点击展开/收起</dt>
    <dd id="holder">
鼠标点击展开收起效果(带缓动效果2)-网页特效代码网
    </dd>
</dl>
<br>
<dl class="box">
    <dt id="title2">点击展开/收起</dt>
    <dd id="holder2">
鼠标点击展开收起效果(带缓动效果3)-网页特效代码网
    </dd>
</dl>
<script type="text/javascript">
/*
*  id:展开/收起内容区的id
*  minH : 展开/收起的最小高度
*  maxH : 展开/收起的最大高度
*  expand : true - 从收起到展开、false - 从展开到收起
*  rate : 缓动变化率 0-1
*  speed : 速度(毫秒)
*/
var Toggle = function(id, minH, maxH, expand, rate, speed){
    this.minH = minH;
    this.maxH = maxH;
    this.tempH = 0;
    this.rate = rate;
    this.speed = speed;
    this.moving = false;
    this.moveT = null;
    this.holder = document.getElementById(id);
    this.expand = expand;
}
Toggle.prototype = {
    start : function(){
        if(this.moving) return;
        this.moving = true;
        this.tempH = this.expand ? this.minH : this.maxH;
        var t = this;
        this.moveT = setInterval(function(){t.move()}, this.speed);
    },
    move : function(){
        if(this.expand){
            if(this.tempH >= this.maxH){
                this.moving = false;
                this.expand = false;
                clearInterval(this.moveT);
            }else{
                var h = Math.round((this.maxH - this.tempH) * this.rate);
                if(h <= 1){
                    h = 1;
                }
                this.tempH += h;
            }
        }else{
            if(this.tempH <= this.minH){
                this.moving = false;
                this.expand = true;
                clearInterval(this.moveT);
            }else{
                var h = Math.round((this.tempH - this.minH) * this.rate);
                if(h <= 1){
                    h = 1;
                }
                this.tempH -= h;
            }
        }
        this.holder.style.height = this.tempH + "px";
    }
}
//版块一(默认已收起)
var obj = new Toggle("holder",20,200,true, 0.2, 10);
document.getElementById("title").onclick = function(){
    obj.start();
}
//版块二(默认已展开)
var obj2 = new Toggle("holder2",20,200,false, 0.2, 10);
document.getElementById("title2").onclick = function(){
    obj2.start();
}
</script>
</body>
</html>

岩石地址：http://www.iiwnet.com/js_window/304.html