js--缓动动画、匀速运动、无缝滚动

来源：互联网发布：windows 桌面版qq 编辑：程序博客网时间：2024/05/16 19:34

匀速运动：

<script>    function $(id) {        return document.getElementById(id)    }    var num = 0;    var timer = null;    //给button设置点击事件    $("btn").onclick = function () {        //设置动画 每30s调用下面的函数一次        timer = setInterval(function () {            num++;            //当num==400时 num重新等于0            if(num>=400){                num = 0;            }                        $("box").style.left = num + "px";        },30)    }</script>

无缝滚动：

div class="box" id="box">    <ul>        <li><img src="images/01.jpg" alt=""></li>        <li><img src="images/02.jpg" alt=""></li>        <li><img src="images/03.jpg" alt=""></li>        <li><img src="images/04.jpg" alt=""></li>!!important        <li><img src="images/01.jpg" alt=""></li>        <li><img src="images/02.jpg" alt=""></li>    </ul></div><script>    var box = document.getElementById("box");    //box 下面的第一个ul （装图片的ul）    var ul = box.children[0];    var num = 0;    var timer = null;    timer = setInterval(autoPlay,10);    function autoPlay() {        num--;        //滚动4张图 每张图大小为300px        num < -1200 ? num = 0: num;        //每10s给ul设置left        ul.style.left = num + "px";    }    box.onmouseover = function () {       clearInterval(timer);    };    box.onmouseout = function () {       timer = setInterval(autoPlay,10);    };</script>

案例：

缓动动画公式:  leader = leader + (target - leader ) /10 ;

<script>    function $(id){return document.getElementById(id)}    var target = 400,leader = 0;    $("btn").onclick = function () {        setInterval(function () {            //缓动公式：每50s对leader进行一次计算            leader = leader +(target-leader)/10;            $("box").style.left = leader + "px";        },50)    }</script>

阅读全文

0 0