JS动画效果(移动、透明度、缓冲、多物体)

来源：互联网发布：阿里云消息推送编辑：程序博客网时间：2024/05/17 08:54

JavaScript中可以通过setInterval()函数来实现动态效果。
setInterval()函数设置一个定时器，可以按照指定周期调用函数或计算表达式。setInterval()可以不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval()函数用法：

//每隔3000毫秒输出"Hello world"var timer = setInterval(function(){alert("Hello world"); }, 3000);

clearInterval()函数用法:

var timer = setInterval(function(){alert("Hello world"); }, 3000); //设置每3000毫秒输出"Hello world"clearInterval(timer);  //取消定时器

移动动画

通过setInterval()设置定时器，周期性地修改div的left偏移属性，从而达到移动的效果。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>速度动画</title></head><style type="text/css">    body,div,span{        margin: 0px;        padding: 0px;    }    #div1 {        width: 200px;        left: -200px;        height: 200px;        background-color: red;        position: relative;    }    #div1 span{        width: 20px;        height: 50px;        position: absolute;        background-color: aqua;        top: 75px;        left: 200px;    }</style><script type="text/javascript">    window.onload = function () {        var onDiv = document.getElementById("div1");        onDiv.onmouseover = function () {            onMove(0);        }        onDiv.onmouseout = function () {            onMove(-200);        }    }    var timer;    function onMove(target) {        clearInterval(timer);        var onDiv1 = document.getElementById("div1");        timer = setInterval(function () {            if(target>onDiv1.offsetLeft)                var speed = 10;            else                var speed = -10;            if(onDiv1.offsetLeft!=target)                onDiv1.style.left = onDiv1.offsetLeft + speed + "px";            else                clearInterval(timer);        },10)    }</script><body><div id="div1">    <span>分享</span></div></body></html>

透明度动画

周期性地修改透明度的值实现鼠标移入移出div透明度变化。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>透明度动画</title></head><style>    body,div{        padding: 0px;        margin: 0px;    }    #div1{        width: 200px;        height: 200px;        background-color: red;        opacity: 0.3;        filter: alpha(opacity:30);    }</style><script>    window.onload = function () {        onDiv = document.getElementById("div1");        onDiv.onmouseover = function () {            onMove(100);        }        onDiv.onmouseout = function () {            onMove(30);        }    }    var alpha = 30;    var timer = null;    var speed = 10;    function onMove(target) {        clearInterval(timer);        onDiv =document.getElementById("div1");        timer = setInterval(function () {            if(alpha < target){                alpha = alpha+speed;            }            else if(alpha > target){                alpha = alpha-speed;            }            else{                clearInterval(timer);                return;            }            onDiv.style.filter = "alpha(opacity:"+alpha+");";            onDiv.style.opacity = alpha/100;        },30);    }</script><body><div id="div1"></div></body></html>

缓冲动画

现实中不是所有东西都是匀速移动的，在速度动画中移动是匀速的，下面例子在此基础上进行改进，定时器每次运行时修改变化速度可实现缓冲动画。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>缓冲动画</title></head><style type="text/css">    body,div,span{        margin: 0px;        padding: 0px;    }    #div1 {        width: 200px;        left: -200px;        height: 200px;        background-color: red;        position: relative;    }    #div1 span{        width: 20px;        height: 50px;        position: absolute;        background-color: aqua;        top: 75px;        left: 200px;    }</style><script type="text/javascript">    window.onload = function () {        var onDiv = document.getElementById("div1");        onDiv.onmouseover = function () {            onMove(0);        }        onDiv.onmouseout = function () {            onMove(-200);        }    }    var timer = null;    function onMove(target) {        clearInterval(timer);        var onDiv1 = document.getElementById("div1");        timer = setInterval(function () {            var speed = (target - onDiv1.offsetLeft)/20;            speed = Math.floor(speed);            if(onDiv1.offsetLeft!=target)                onDiv1.style.left = onDiv1.offsetLeft + speed + "px";            else                clearInterval(timer);        },10)    }</script><body><div id="div1">    <span>分享</span></div></body></html>

多物体动画

当需要对多个相似物体设置动画时，例如列表中的多个选项，各个物体之间不能共用物体。下例中需要对每一个li设置初始透明度、定时器。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>多物体动画</title>    <style>        body,ul,li{            padding: 0px;            margin: 0px;        }        ul,li{            list-style: none;        }        li{            width: 200px;            height: 100px;            margin-top: 20px;            background-color: red;            filter: alpha(opacity:30);            opacity: 0.3;        }    </style>    <script>        window.onload = function () {            var allLi = document.getElementsByClassName("lis");            for(var i = 0;i < allLi.length;i++){                allLi[i].alpha = 30;                allLi[i].timer = null;                allLi[i].onmouseover = function () {                    onMove(this,400);                }                allLi[i].onmouseout = function () {                    onMove(this,200);                }            }        }        function onMove(obj,target) {            clearInterval(obj.timer);            obj.timer = setInterval(function () {                var speed = (target - obj.offsetWidth)/30;                speed = (speed>0)?Math.ceil(speed):Math.floor(speed);                var cSpeed = (speed>0)?5:-5;                if(obj.offsetWidth!=target){                    obj.style.width = obj.offsetWidth + speed + "px";                    if(obj.alpha<=100 && obj.alpha>=30){                        obj.alpha = obj.alpha + cSpeed;                        if(obj.alpha>100)                            obj.alpha = 100;                        if(obj.alpha<30)                            obj.alpha = 30;                        obj.style.opacity = obj.alpha/100;                        obj.style.filter = "alpha(opacity:"+ obj.alpha +")";                    }                }                else{                    clearInterval(obj.timer);                }            },30)        }    </script></head><body><div>    <ul>        <li class="lis"></li>        <li class="lis"></li>        <li class="lis"></li>    </ul></div></body></html>

杂项

body、ul、li自带默认边距对程序产生影响。使用padding:0px;margin:0px 消除
消除无序列表符号:list-style: none;

设置透明度：

filter: alpha(opacity:30); //IE浏览器opacity: 0.3; //firefox等

阅读全文

0 0