<html>

<head>

<title> javaScript缓动入门 </title>

</head>

<body>

<style type=text/css>

 #taxiway {

    background: #e8e8ff; width: 800px; height: 100px

 }

 #move {

     background: #a9ea00; width:100px; height:98px; border:1px solid red

 }

</style>

<div id="taxiway">

 <div id="move" style="position: absolute; left: 0" onClick="start()"></div>

</div>

<p class=notice display="text-align:center">点击可移动绿色方块</p>

<p id="time0"></p>

<p id="time1"></p>

<p id="time2"></p>

</body>

<script>

/*var myDate = new Date();

myDate.getYear();        //获取当前年份(2位)

myDate.getFullYear();    //获取完整的年份(4位,1970-????)

myDate.getMonth();       //获取当前月份(0-11,0代表1月)

myDate.getDate();        //获取当前日(1-31)

myDate.getDay();         //获取当前星期X(0-6,0代表星期天)

myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours();       //获取当前小时数(0-23)

myDate.getMinutes();     //获取当前分钟数(0-59)

myDate.getSeconds();     //获取当前秒数(0-59)

myDate.getMilliseconds();    //获取当前毫秒数(0-999)

myDate.toLocaleDateString();     //获取当前日期

var mytime=myDate.toLocaleTimeString();     //获取当前时间

myDate.toLocaleString( );        //获取日期与时间

*/

//这里的动画距离是没有误差了，但是在执行时间的时候有很大的误差，所以只能改成时间戳的动画！

var o_show_time0 = document.getElementById('time0');

var o_show_time1 = document.getElementById('time1');

var o_show_time2 = document.getElementById('time2');

//动画参数设置http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

//这个动画好执行距离没有误差，但是在执行动画的时候有误差

var Tween = {

    Quad: {

    easeOut: function(t, b, c, d) {

           t/=d;  //   t=t/d   1/100 //这样就走了100份之一

                   //当t等于d的时候那么他们相除就等于1  刚刚好是初始值动画和结束值相加的值

    return b+c*(t);

}

    }

}

//b:div之样式left初值，c:div要移动的距离，d：div在时间d内完成移动，t:时间

//   d：div在时间d内完成移动 的时间是  d=1000*10  (Run,10)的10

var b=0,c=500,d=1000,t=0;

function Run(){

    var left =  Math.ceil(Tween.Quad.easeOut(t,b,c,d));

    move.style.left = left + "px";

     console.log('d='+d);

    console.log('t='+t);

    console.log('left='+left);

    o_show_time1.innerHTML =  new Date();

    if(t>=d){

          o_show_time2.innerHTML =  new Date();

           clearInterval(timer);

          timer = null;

         // setTimeout(Run, 1);

           }

    t++;

}

var timer = null;

function  start(){

    o_show_time0.innerHTML =  new Date();

      timer = setInterval(Run,10);

    }

</script>

</html>

js 模拟css3 动画1的更多相关文章

  1. JS模拟CSS3动画-贝塞尔曲线

    一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...

  2. js 模拟css3 动画3

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 模拟css3 动画

    <html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...

  4. js 模拟css3 动画2

    <html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...

  5. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  6. wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

  1. Linux每天一个命令：nc/ncat

    nmap-ncat.x86_64版nc/ncat nc/ncat所做的就是在两台电脑之间建立链接并返回两个数据流,在这之后所能做的事就看你的想像力了.你能建立一个服务器,传输文件,与朋友聊天,传输流媒 ...

  2. mysql 分组排序取最值

    查各个用户下单最早的一条记录 查各个用户下单最早的前两条记录 查各个用户第二次下单的记录 一.建表填数据: SET NAMES utf8mb4; -- 取消外键约束 ; -- ------------ ...

  3. 将100道计算题输出至txt文件，再读取文件至控制台,在控制台中输入答案并评判对错

    我在课堂上基本完成了输出100道题和创建文档,但是因为对输入输出流不熟悉,所以并没有实现将输出的计算题导出到文档里,在课下我又请教了宿舍的大佬,基本完成如下: 源代码: import java.io. ...

  4. NAS (Network Attached Storage)

    当电脑硬盘容量满了,多数使用者第一个想法就是买一块几TB的硬盘来扩充,如果是笔电的使用者,第一个想到的是买一个外接式硬盘来备份资料,这样的想法并没有错,那是当你还不知道有「NAS」这个好用的东西,才会 ...

  5. xgboost中XGBClassifier(）参数详解

    http://www.cnblogs.com/wanglei5205/p/8579244.html 常规参数 booster gbtree 树模型做为基分类器(默认) gbliner 线性模型做为基分 ...

  6. python2.7安装pip遇到ImportError: cannot import name HTTPSHandle

    python2.7,报错如下: Traceback (most recent call last): File "/usr/local/bin/pip", line 9, in & ...

  7. python学习之路07

    Python中你可能不关心的这几个关键字:break.continue.pass 1.break 作用:跳出循环[直接跳出整个循环,继续执行后面的代码] 1.特殊情况一 #当break使用在嵌套循环中 ...

  8. 2017《JAVA技术》预备作业-计科1502-19-何俏依

    1.阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我期望的师生关系是长辈和晚辈,前辈和后生,朋友与朋友之间的关系,作为晚辈,要尊敬长辈,不能对长辈进行言语攻击和起冲突:作为后生,要谨遵教诲,有 ...

  9. eclipse配置环境变量

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 3.配置环境变量:右击“我的电脑”-->&quo ...

  10. confluence6.3.1部署+数据迁移

    目录: 环境准备 搭建方法 数据迁移 搭建过程中的bug 1,confluence部署 1.1,环境准备 Java:jdk1.8 mysql: 数据库编码规则选择utf8 -- UTF-8 Unico ...