zoukankan      html  css  js  c++  java
  • 用js实现缓冲运动效果

    效果如下,一开始速度很快,然后慢下来,直到停止。

     


    要点:

    var speed = (target-box.offsetLeft)/8;    目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小
    speed = speed>0?Math.ceil(speed):Math.floor(speed);  正向速度的时候向上取整,反向速度的时候向下取整

    上代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>无标题文档</title>
    <style>
    <!--
    body
    {margin:0; padding:0; font:12px/1.5 arial;}
    #box
    {width:100px; height:100px; position:absolute; background:#06c; left:0;}
    -->
    </style>
    <script>
    <!--
    window.onload
    = function(){
    var box = document.getElementById("box");
    var btn = document.getElementById("btn");
    var timer=null;

    btn.onclick
    = function(){
    startrun(
    300);
    }

    function startrun(target){

    clearInterval(timer);
    timer
    = setInterval(function(){
    var speed = (target-box.offsetLeft)/8;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);

    if(box.offsetLeft == target){
    clearInterval(timer);
    }
    else{
    box.style.left
    = box.offsetLeft+speed+"px";
    }

    document.getElementById(
    'abc').innerHTML += box.offsetLeft +',' +speed +'<br>';

    },
    30);

    }


    }
    //-->
    </script>
    </head>

    <body>
    <input id="btn" type="submit" value="向右运动">
    <div id="box">
    </div>
    <br>
    <textarea id="abc" cols="50" rows="10" style="margin-top:130px"></textarea>
    </body>
    </html>



  • 相关阅读:
    XTU1199:Number Game
    SSL连接建立过程分析(1)
    JavaScript高级编程II
    PreferenceFragment 使用 小结
    crm使用soap更改下拉框的文本值
    POJ2241——The Tower of Babylon
    四个好看的CSS样式表格
    无论你在哪里上班,请记住下面黄金法则!
    js的for in循环和java里的foreach循环的差别
    具体解释EBS接口开发之物料导入API
  • 原文地址:https://www.cnblogs.com/jingangel/p/2393420.html
Copyright © 2011-2022 走看看