<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. Java学习笔记35（sql补充）

    在上一篇里,写了数据库的增删该查,没有写完,这里补充 CREATE DATABASE Zs_Base; USE Zs_Base; # 创建表 CREATE TABLE PRODUCT( ID INT ...

  2. 莫烦tensorflow(6)-tensorboard

    import tensorflow as tfimport numpy as np def add_layer(inputs,in_size,out_size,n_layer,activation_f ...

  3. python+flask开发小白第二天

    使用VSCode编译python web页面 1.先从最基础的说起吧,关于VSCode的使用: 运行python程序与运行java,c,c++程序一样,需要新建一个文件,第一个文件建议不要新建在本地的 ...

  4. 我在MySQL免安装版使用过程中遇到的问题记录

    我的MySQL版本为:mysql-5.7.16-winx64 安装时间为:2016年5月10号 由于是免安装版,下载好压缩文件之后解压到特定目录下,再打开命令行运行几行命令即可. 在一次操作中,发现无 ...

  5. 二进制安装MySQL数据库

    今天安装的是二进制的mysql包5.7.21的包,在配置文件的时候采了好多坑,左后还是搞定了,来和大家分享一下 二进制msyql5.7.21版本的主从复制安装 新建/picclife目录 mkdir  ...

  6. Atom选中多行操作

    没有用过sublime,但是有选取多行的需求 我有一个文本文件,前面几行都是文件夹路径,并且都是单个字母,我想删除路径,保存纯粹的子文件夹名称,这样可以上传谷歌翻译文档,写程序再写txt略显麻烦,直接 ...

  7. cordova热更新插件的使用：cordova-hot-code-push-plugin

    1. 添加插件:cordova plugin add cordova-hot-code-push-plugin 2. 先打开cli,执行命令 npm install -g cordova-hot-co ...

  8. Eslint 能自动格式化代码，为什么还要用 Prettier？

    ESLint 与 Prettier 区别: ESLint:代码检测工具:可以检测出你代码中潜在的问题,比如使用了某个变量却忘记了定义: Prettier:代码格式化工具:作为代码格式化工具,能够统一你 ...

  9. xgboost实例代码

    # -*- coding: utf-8 -*- import xgboost as xgb import csv import jieba jieba.load_userdict('wordDict. ...

  10. mysql悲观锁

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念. 悲观锁(Pessimistic Lock) 悲观锁的特点是先获取锁,再进行业务操作,即“悲观”的认为获取锁是非常有可能 ...