zoukankan      html  css  js  c++  java
  • js动画--缓冲动画

    前面讲述的动画速度都是匀速的,现实生活中的运动速度的变化不一定是恒定的,存在一定的缓冲,就像火车进站一样,速度会越来越慢。

    对于改变速度措施,其实只要将动画第一课的程序稍微的改变一下就可以了,我们来看一下代码如何实现的

    html

    <!DOCTYPE html>
    <html>
    <head>
    <title>js动画事件</title>
    <link href="move.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="move.js"></script>
    </head>
    <body>
    <div id="div1">
    <span id="sp1">分享</span>
    </div>
    </body>
    </html>

    css

    *{
        margin:0px;
        padding:0px;
    }
    #div1{
        width:200px;
        height:200px;
        position:absolute;
        left:-200px;
        background:red;
        border:1px solid #eeddcc;
    }
    #sp1{
        display:block;
        width:20px;
        height:80px;
        position:absolute;
        left:200px;
        top:60px;
        border:1px solid red;
        color:#036;
        line-height:40px;
    }

    js

    var timer;
    window.onload=function(){
        var div1=document.getElementById("div1");
        div1.onmouseover=function(){
            RunPlay(0);
        }
        div1.onmouseout=function(){
            RunPlay(-200);
        }
    }
    
    function RunPlay(target){
        var div1=document.getElementById("div1");
        clearInterval(timer);
        var speed=10;
        timer=setInterval(function(){
            if(target>div1.offsetLeft){
                speed=Math.ceil((target-div1.offsetLeft)/10);//缓冲的效果就是在这里实现的,我们将速度的大小与当前位置与终点之间的距离成正比,那么距离越小,速度也越小,此外一定要注意,这里我们要对速度进行向上,或者向下取整,而且对于正数我们要向上取整,对于负速度,我们要向下取整。
            }else{
                speed=Math.floor((target-div1.offsetLeft)/10);
            }
            if(div1.offsetLeft==target){
                alert(speed);
                clearInterval(timer);
            }else{
                div1.style.left=div1.offsetLeft+speed+"px";
            }
            
        },50)
        
    }
  • 相关阅读:
    c#驱动操作mongodb辅助类MongoDBHelper
    c#多线程lock无效
    利用Aspose.Words将html转成pdf和将html转成word
    前后端值映射的问题
    本机部署流程详解
    Git 安装配置手册
    js对象数组(JSON) 根据某个共同字段 分组
    jquery中的$.fn的用法
    JSON.parse()与JSON.stringify()的区别
    添加编辑 时 数据不可重复验证
  • 原文地址:https://www.cnblogs.com/yuaima/p/5114404.html
Copyright © 2011-2022 走看看