js动画学习笔记

<html>
<head>
    <meta charest="utf-8">
    <title>test</title>
    <style>
        #div{
            background:darkred;
            position:absolute;
            200px;
            height:200px;
            left:-200px;
        }
        #span1{
            background: blue;
            position: relative;
            50px;
            top:0;
            left:200px;
        }
        #div2{
            background: red;

            position:relative;
            left:350px;
            200px;
            height:200px;
            filter: alpha(opacity:30);
            opacity:0.3;
        }
    </style>
    <script>
        //这是速度动画
//        window.onload = function () {
//            var div = document.getElementById("div");
//            div.onmouseover = function(){
//                start1(0);
//            }
//            div.onmouseout = function(){
//                start1(-200);
//            }
//        };
//        var timer=null;
//        function start1(target) {
//            var speed = 0;
//            clearInterval(timer);
//            var div = document.getElementById("div");
//            timer = setInterval(function () {
//                //用来判断该加还是该减
//                if (div.offsetLeft > target) {
//                    speed = -10;
//                }
//                else {
//                    speed = 10;
//                }
//                //用来判断当达到目标值时的操作
//                if (div.offsetLeft == target) {
//                    clearInterval(timer);
//                } else {
//                    div.style.left = div.offsetLeft + speed + "px";
//                }
//            }, 30)
//        }

        //下面是分散的函数，上面的是把两个函数联合起来了
//        function start(){
//            clearInterval(timer);
//            var div = document.getElementById("div");
//            timer = setInterval(function () {
//                if(div.offsetLeft===0)
//                {
//                    clearInterval(timer);}
//                else
//                {
//                    div.style.left = div.offsetLeft + 10 + "px";}
//            },30);
//        }
//        function stop(){
//            clearInterval(timer);
//            var div = document.getElementById("div");
//            timer = setInterval(function () {
//                if(div.offsetLeft == -200)
//                {
//                    clearInterval(timer);}
//                else
//                {
//                    div.style.left = div.offsetLeft - 10 + "px";}
//            },30);
//        }

        //这是透明度动画
        window.onload = function () {
            var div2 = document.getElementById("div2");
            div2.onmouseover = function () {
                start(80);
            };
            div2.onmouseout = function () {
                start(30);
            }
        };
        var timer = null;
        var opacity = 30;//当前透明度，初始值为30
        function start(target){
            clearInterval(timer);
            var speed ;
            var div2 = document.getElementById("div2");
            timer = setInterval(function () {
                if(opacity > target)//如果当前的透明度大于目标值
                {speed = -10;}
                else
                {speed = 10;}

                if(opacity == target)//如果当前的透明度等于目标值，就结束定时器
                {clearInterval(timer);}
                else{
                    opacity += speed;
                    div2.style.filter = "alpha(opacity:" + opacity +");";
                    div2.style.opacity = opacity/100;
                }
            },300)
        }



        //这里是缓冲动画
//                window.onload = function () {
//                    var div = document.getElementById("div");
//                    div.onmouseover = function(){
//                        start1(0);
//                    };
//                    div.onmouseout = function(){
//                        start1(-200);
//                    }
//                };
//                var timer=null;
//                function start1(target) {
//                    clearInterval(timer);
//                    var div = document.getElementById("div");
//                    timer = setInterval(function () {
//                        var speed = (target - div.offsetLeft)/20;
//                        console.log(div.offsetLeft);
//                        //这里值得注意的是，因为CSS中的像素大小都是整数的，所以一定要记得把speed取整，且应该是向上取整的，
//                        //而对于正数，向上取整为 Math.ceil(),而对于负数要用Math.floor()
//                        if(speed>0)
//                            speed = Math.ceil(speed);
//                        else
//                            speed = Math.floor(speed);
//                        //用来判断当达到目标值时的操作
//                        if (div.offsetLeft == target) {
//                            clearInterval(timer);
//                        } else {
//                            div.style.left = div.offsetLeft + speed + "px";
//                        }
//                    }, 30)
//                }

    </script>
</head>
<body>
<div id="div"><span id="span1">cccccccc</span></div>
<div id="div2">jjjj</div>
</body>
</html>
View Code
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
       #div ul {
           list-style: none;
       }
        #div ul li{
            200px;
            height:200px;
            margin:40px;
            background: red;
            filter:alpha(opacity:30);
            opacity:0.3;

        }

        /*div{*/
            /*background:red;*/
            /*200px;*/
            /*height:200px;*/
            /*filter:alpha(opacity:30);*/
            /*opacity:0.3;*/
            /*margin:30px;*/
        /*}*/
    </style>
    <script>
        window.onload = function () {
            var div = document.getElementsByTagName("li");
            for (var i = 0;i<div.length;i++){
                div[i].timer = null;//这里应该是为每一个元素都定义一个timer,不然后面每个元素都会争抢timer,导致不好的效果。
                div[i].onmouseover = function () {
                    start (this,400);
                };
                div[i].onmouseout = function () {
                    start(this,200);
                }
            }
        };
        //var timer = null;这里就不能再像这样定义一个公用的timer了，而是要为每一个元素都定义一个timer
        function start(obj,target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = (target - obj.offsetWidth)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(target == obj.offsetWidth)
                    clearInterval(timer);
                else
                    obj.style.width = obj.offsetWidth + speed + "px";
            },30);
        }

//    window.onload = function () {
//        var div = document.getElementsByTagName("div");
//        for(var i=0;i<div.length;i++){
//            div[i].alpha = 30;
//            div[i].timer = null;
//            div[i].onmouseover = function () {
//                start(this,100);
//            };
//            div[i].onmouseout = function () {
//                start(this,30);
//            };
//        }
//    };
//    function start(obj,target){
//        console.log("123");
//        var speed = 0;
//        clearInterval(obj.timer);
//        obj.timer = setInterval(function () {
//            if(obj.alpha > target)//如果当前的透明度大于目标值
//                { speed = -10;}
//            else
//                { speed = 10;}
//
//            if(target == obj.alpha)
//            {clearInterval(obj.timer);}
//            else{
//                    obj.alpah += speed;
//                    obj.style.filter = "alpha(opacity:" + obj.alpah + ");";
//                    obj.style.opacity = obj.alpha/100;
//                }
//        },30);
//    }

    </script>
</head>
<body>
<div id="div">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
</body>
</html>
View Code
<html>
<head>
    <meta charest="urf-8">
    <title>test</title>
    <style>
        #div ul {
            list-style: none;
        }
        #div ul li{
            200px;
            height:200px;
            margin:40px;
            background: red;
            filter:alpha(opacity:30);
            opacity:0.3;
            border:10px solid #000;
        }
    </style>
    <script>
//window.onload = function () {
//    var div = document.getElementsByTagName("li");
//    for (var i=0;i<div.length;i++){
//        div[i].timer = null;
//        div[i].onmouseover = function () {
//            start(this,"width",400);
//        };
//        div[i].onmouseout = function () {
//            start(this,"width",200);
//        }
//    }
//};
//function start(obj,attr,target) {
//    clearInterval(obj.timer);
//    obj.timer = setInterval(function () {
//        var icur = parseInt(getStyle(obj,attr));
//        var speed = (target - icur)/8;
//        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//        if(target = parseInt(icur))
//            clearInterval(timer);
//        else
//            obj.style[attr] = icur + speed + "px";
//    },30)
//}
//function getStyle(obj,attr) {
//    if(obj.currentStyle)
//        return obj.currentStyle;
//    else
//        return getComputedStyle(obj,false)[attr];
//}



window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].timer=null;
        aLi[0].onmouseover=function(){
            startMove(this,"height",400);
        }
        aLi[0].onmouseout=function(){
            startMove(this,"height",200);
        }
    }
    aLi[1].onmouseover=function(){
        startMove(this,"width",400);
    }
    aLi[1].onmouseout=function(){
        startMove(this,"width",200);
    }

}
//var timer=null;
function startMove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var icur=parseInt(getStyle(obj,attr));
        var speed=(iTarget-icur)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(icur==iTarget){
            clearInterval(obj.timer);
        }
        else{
            obj.style[attr]=icur+speed+"px";
        }
    },30);
}
function getStyle(obj,attr) {
    if(obj.currentStyle)
        return obj.currentStyle;
    else
        return getComputedStyle(obj,false)[attr];
}
    </script>
</head>
<body>
<div id="div">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>
View Code

 较为完整的代码

function getStyle(obj,attr) {
    if(obj.currentStyle)
        return obj.currentStyle;
    else
        return getComputedStyle(obj,false)[attr];
}

window.onload=function(){
    var aLi=document.getElementsByTagName("li");
    for(var i=0;i<aLi.length;i++){
        aLi[i].timer=null;
        aLi[0].onmouseover=function(){
            startMove(this,"height",400);
        }
        aLi[0].onmouseout=function(){
            startMove(this,"height",200);
        }
    }
    aLi[1].onmouseover=function(){
        startMove(this,"opacity",100);
    }
    aLi[1].onmouseout=function(){
        startMove(this,"opacity",30);
    }

}

function startMove(obj,attr,iTarget){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var icur = 0;
        if(attr == "opacity"){
            icur = Math.round(parseFloat(getStyle(obj,attr))*100);//本来最大是1的，但是习惯用最大为100的
        }else{
            icur = parseInt(getStyle(obj,attr));
        }
        var speed = (iTarget-icur)/8;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
        if(icur == iTarget){
            clearInterval(obj.timer);
        }else{
            if(attr == "opacity"){
                obj.style.filter = "alpha(opacity:"+(icur+speed)+")";//针对IE
                obj.style.opacity = (icur+speed)/100;//针对firefox和chrome
            }else{
                obj.style[attr] = icur + speed + "px";
            }
        }
    },30)
}
View Code

完整代码

function startMove(obj,json,fn){
       clearInterval(obj.timer);
       obj.timer=setInterval(function(){
           var flag=true;   //标志所有运动是否到达目标值
           for(var attr in json){
               var curr=0; //获取当前的值，设置为0下面进行赋值
               //判断是否为透明度
               if(attr=='opacity'){
                   curr=Math.round(parseFloat(getStyle(obj,attr))*100); //对透明度处理
               }else{
                   curr=parseInt(getStyle(obj,attr)); //对普通的宽高处理
               }
               //移动速度处理
               var speed=0;
               speed=(json[attr]-curr)/8; //json[attr]为属性值即目标值
               speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整数，将速度取整从而达到目标值
//检测停止
               if(curr!= json[attr]){
                   flag=false;//检测为false则继续下面的操作
               }
               if (attr=='opacity') {
                   obj.style.filter='alpha(opacity:'+(curr+speed)+");//IE浏览器
       obj.style.opacity=(curr+speed)/100;//firefox浏览器
   }else{
       obj.style[attr]=curr+speed+'px';
   }
   }
   if(flag){ //检测为true则继续下面的操作
       clearInterval(obj.timer);
       if(fn){  //检测是否有回调函数，有就执行
           fn();
       }
   }
   },30);
   }
   //取样式
   function getStyle(obj,attr){
       if(obj.currentStyle){
           return obj.currentStyle[attr];  //IE取样式
       }else{
           return getComputedStyle(obj,false)[attr];
       }
   }
View Code

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。

2.offsetWidth属性仅是可读属性，而style.width是可读写的。

3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。

4.style.width仅能返回以style方式定义的内部样式表的width属性值。(div.style.width可以获取到内联设置中width的值，获取到内嵌中的是width+padding+border)

例如：
#div{200px;height:200px; border:1px solid #ccc;}这样一个样式，当我们使用var div = document.getElementById("div");div.offsetWidth的值为202，200+1+1,；所以当我们使用div.style.width = div.offsetWidth- 1 + "px"时结果是宽度在增大，而不是减小。所以此时我们可以使用获取样式的方法来只获取到样式定义中的width（200）
function getStyle(obj,attr){
 if(obj.currentStyle){
//currentStyle针对IE浏览器；
    return obj.currentStyle[attr];}
else{return getComputedStyle(obj,flase)[attr];}}
//getComputedStyle 针对Firefox浏览器
这样我们就可以这样使用了，div.style.width = parseInt(getStyle(div,"width")) - 1 + "px";//其中parseInt就是将字符串转换Wie整形的数字。
同样这个方法是可以获取到其他的属性的，比如：div.style.font-size = parseInt(getStyle(div,"font-size")) - 1 + "px";等
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fireporsche/p/6287781.html