Javascript——动画函数封装及案例

1.协议按钮禁用 2.设置div透明度渐变 3.设置div变宽 4.设置移动元素

1

<textarea name="texta" id="" cols="30" rows="10">
    我想逃往哪里逃，你那百毒不侵的微笑，我想逃要往哪里逃，你的喜怒哀乐都那么美妙
</textarea>
<input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" />
<script src="common.js"></script>
<script>
    var time=5;
    var timeId= setInterval(function() {
        time--;
        my$("btn").value = "请仔细阅读协议(" + time + ")";
        if(time <= 0) {
            //停止定时器就可以
            clearTimeout(timeId);
            //按钮可以被点击
            my$("btn").disabled=false;
            my$("btn").value="同意";
        }
    },1000);
</script>

2

//随便写个div样式
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        var opacity=10;
        //按钮点击事件
        var timeId=setInterval(function(){
        //透明化了
        opacity--;
        if(opacity<=0){
            clearInterval(timeId);//清理定时器
        }
        //设置div透明度
        my$("dv").style.opacity=opacity/10;
        },200);
    };
</script>

3

//随便写个div样式
<input type="button" value="变宽" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        var width=200;
        var timeId=setInterval(function(){
            width+=10;
            if(width==800){
                clearInterval(timeId);
            }
            my$("dv").style.width=width+"px";
            },200);
        };
</script>

4

//随便写个div
<input type="button" value="移动到400px" id="btn"/>
<div id="dv" style=""></div>
<script src="common.js"></script>
<script>
    //div要移动，要脱离文档流——position: absolute
    //如果样式代码是在style标签中设置，外面获取不到；如果样式代码是在style属性设置，外面可以获取
    my$("btn").onclick=function(){
        var timeId=setInterval(function(){
            //获取div当前位置
            var current=my$("dv").offsetLeft;//数字类型，没有px
            //div每次移动多少像素——步数
            var step=10;
            current+=step;
            //判断当前移动后的位置是否到达目标位置
            if(current<=400){
                my$("dv").style.left=current+"px";
            }else{
                //清理定时器
                clearInterval(timeId);
            }
        },20);
    };

封装动画函数

<script>
    //设置任意一个元素，移动到指定目标位置
    function animate(element, target){
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId=setInterval(function(){
            //获取元素的当前位置，数字类型
            var current=element.offsetLeft;
            //每次移动距离
            var step=10;
            step=current<target?step:-step;
            //当前移动到的位置
            current+=step;
            if(Math.abs(current-target)>Math.abs(step)){
                element.style.left=current+"px";
            }else{
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left=target+"px";
            }
        },20);
    }
</script>