<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: 50" onClick="Run()"></div>

</div>

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

</body>

<script>

var Tween = {

    Quad: {

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

            return -c *(t/=d)*(t-2) + b;

        }

    }

}

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

var b=50,c=650,d=100,t=0;

function Run(){

    move.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";

    if(t<d){ t++; setTimeout(Run, 10); }

}

</script>

</html>

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

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

    <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. Python 进程池的同步方法

    import time from multiprocessing import Process,Pool def f1(n): time.sleep(1) #print(n) return n*n i ...

  2. Socket网络编程入门

    Socket:专业术语:套接字;通俗的解释:两孔插座(一个孔:IP地址,一个孔:端口号).使用场景:通信,如QQ好友交谈,如浏览器的进程怎么与web服务器通信等. Socket来历: socket起源 ...

  3. 深入理解Java中停止线程

    一.停止线程会带来什么? 对于单线程中,停止单线程就是直接使用关键字return或者break,但是在停止多线程时是让线程在完成任务前去开启另外一条线程,必须放弃当前任务,而这个过程是不可预测,所以必 ...

  4. 温度转换-python

    #接收一段字符串 TempStr = input("请输入带有符号的温度值:") #如果 TS 最后一位是大写或是小写 f if TempStr[-1] in ['F','f']: ...

  5. BBS项目详解（forms快速创建登陆页面，登陆验证、通过阅读器进行头像上传的预览、内存管理器）

    BBS项目涉及的知识点 django中知识点 钩子函数(局部钩子和全局钩子) 1.局部钩子就是用来做合法性校验,比如用户名有没有被使用等 2.全局的就是用来做对比校验,比如两次输入的密码是否一致 3. ...

  6. 为WebService添加身份验证的两种方法

    方法一:SoapHeader 辅助类:MySoapHeader //SoapHeader 添加引用 using System.Web.Services.Protocols; #region 配置登录标 ...

  7. zombodb 低级api 操作

    zombodb 低级api 允许直接从zombodb 索引中进行insert.delete 文档,同时保留了mvcc 的特性,但是数据没有存储在 pg 中,但是也带来数据上的风险,我们需要注意进行es ...

  8. LDAP学习总结

    一.简介: LDAP(Light Directory Access Portocol),它是基于X.500标准的轻量级目录访问协议.目录是一个为查询.浏览和搜索而优化的数据库,它成树状结构组织数据,类 ...

  9. [转]Python如何引入自定义模块?

    转自 http://www.cnblogs.com/JoshuaMK/p/5205398.html Python运行环境在查找库文件时是对 sys.path 列表进行遍历,如果我们想在运行环境中注册新 ...

  10. linux git 保存用户名和密码

    一.通过文件方式 1.在~/下, touch创建文件 .git-credentials, 用vim编辑此文件,输入内容格式: touch .git-credentials vim .git-crede ...