JavaScript动画效果

记录学习”JavaScript动画效果”笔记

JavaScript动画效果

速度动画

在鼠标移入移出div元素时，设置的动画

        window.onload = function () {
   
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function () {
    //鼠标移入事件
                startMove(0);
            };
            oDiv.onmouseout = function () {
   //鼠标移出事件
                startMove(-200);
            }
        }

var timer = null;
        function startMove(iTarget){
   
            clearInterval(timer);
            var oDiv = document.getElementById("div1");
            timer = setInterval(function () {
   
                var speed = 0;
                if(oDiv.offsetLeft > iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + speed + "px";
                }
            }, 30);
        }

效果如下：

透明度动画

设置鼠标移入时，透明度为100，移出时，为30。

        window.onload = function () {
   
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function () {
   
                startMove(100);//鼠标移入的时候，透明度变为100
            };
            oDiv.onmouseout = function () {
   
                startMove(30);//鼠标移出的时候，透明度变为30
            };
        }

        var timer = null;
        var alpha = 30;
        function startMove(iTarget){
   
            var oDiv = document.getElementById("div1");
            clearInterval(timer);
            timer = setInterval(function () {
   
                var speed = 0;
                if(alpha > iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha += speed;
                    oDiv.style.filter = "alpha(opacity:"+alpha+")";
                    oDiv.style.opacity = alpha / 100;
                }
            }, 30);