<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. 神州数码OSPF基于端口认证（简单认证、MD5认证）

    实验要求:掌握OSPF基于端口认证方式 拓扑如下 简单认证 R1 enable 进入特权模式 config  进入全局模式 hostname R1 修改名称 interface s0/1 进入端口 i ...

  2. Python全栈之路----流程控制+循环

    (一)流程控制 1.单分支结构    if  条件: 满足条件后要执行的代码 2.双分支结构: if  条件: 满足条件后要执行的代码 else : if 不满足就执行这个代码 3.多分支结构:if ...

  3. 20155219 mybash的实现

    第五周加分题--mybash的实现 题目要求 1.使用fork,exec,wait实现mybash 2.写出伪代码,产品代码和测试代码 3.发表知识理解,实现过程和问题解决的博客(包含代码托管链接) ...

  4. Leetcode : eImplement strStr

    Leetcode : eImplement strStr 描述 对于一个给定的 source 字符串和一个 target 字符串,你应该在 source 字符串中找出 target 字符串出现的第一个 ...

  5. spring boot 1.4 整合 mybatis druid

    http://www.jianshu.com/p/cef49ad91ba9spring boot 1.4 整合 mybatis druid

  6. 学习笔记TF037:实现强化学习策略网络

    强化学习(Reinforcement Learing),机器学习重要分支,解决连续决策问题.强化学习问题三概念,环境状态(Environment State).行动(Action).奖励(Reward ...

  7. java_注解

    注解1    注解的概念    jdk自带的注解    声明与使用注解的基本语法        注解的概念        在javaEE与开源框架中广泛使用,泛型在集合框架中广泛使用        注 ...

  8. pxe+Kickstart自动装机补充知识点

    1.vmlinuzvmlinuz是可引导的.压缩的内核.“vm”代表“Virtual Memory”.Linux 支持虚拟内存,不像老的操作系统比如DOS有640KB内存的限制.Linux能够使用硬盘 ...

  9. Web Service入门简介(一个简单的WebService示例)

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  10. 微信支付，退款时，出现了内部错误-网站中X509Certificate2加载证书时出错

    今天给阿里云,虚拟主机 网站配置了加密证书文件,用类X509Certificate2加载证书文件时,一直报出现了内部错误,但是Demo中用控制台程序加载证书没任何问题 读取证书文件的语句: X509C ...