<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 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内完成移动 的时间是

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

function start(){

     o_show_time0.innerHTML =  new Date();

 function Run(){

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

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

    //console.log(left)

    if(t<d){

         t++;

         console.log('d='+d)

          console.log('t='+t)

          o_show_time1.innerHTML =  new Date();

           setTimeout(Run, 10);

           }

}

Run();

    }

</script>

</html>

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

  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 动画1

    <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. nginx 504 Gateway Time-out

    #设定http服务器 http { include mime.types; #文件扩展名与文件类型映射表 default_type application/octet-stream; #默认文件类型 ...

  2. idea设置代码提示不区分大小写

    idea设置代码提示不区分大小写 intellij idea默认下的代码提示是区分大小写的,例如类方法名过长.类的名字过长等,完全通过手打的话较为繁琐,这里简单的设置下即可. 把 Case sensi ...

  3. 获取Ueditor里面的图片列表，地址绝对化

    /**     * 内容中图片地址转成绝对地址     * @param $content     * @return mixed     */    private function imgUrl( ...

  4. 剑指Offer 48. 不用加减乘除做加法 （其他）

    题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题目地址 https://www.nowcoder.com/practice/59ac416b4b944300 ...

  5. 5.移动终端App测试点归纳

    以下所有测试最后必须在真机上完整的执行. 1 安装.卸载测试 1.1 在真机上.第三方软件(xy苹果助手.91.安卓助手)的安装与卸载 1.2 安装在手机卡上 或 SD卡上 (不同的IOS和安卓版本) ...

  6. 判断是不是微信浏览器和QQ内置浏览器

    is_weixn() { let ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "mi ...

  7. 使用flask框架实现web页面与数据库数据互联+常见的几种状态码

    1.通过cygwin从pip install两个包:PyMySQL.SQLAlchemy: 2.在app.py中import我们要用到的库中的包:create_engine,text :from sq ...

  8. 类Shiro权限校验框架的设计和实现(2)--对复杂权限表达式的支持

    前言: 我看了下shiro好像默认不支持复杂表达式的权限校验, 它需要开发者自己去做些功能扩展的工作. 针对这个问题, 同时也会为了弥补上一篇文章提到的支持复杂表示需求, 特地尝试写一下解决方法. 本 ...

  9. angular.copy(source, destination)

    angular.copy(source, destination)只有1个参数,返回source的深拷贝有2个参数source的深拷贝复制给destination

  10. C#程序优化的50种方案

    一.用属性代替可访问的字段 1..NET数据绑定只支持数据绑定,使用属性可以获得数据绑定的好处: 2.在属性的get和set访问器重可使用lock添加多线程的支持. 二.readonly(运行时常量) ...