js 模拟css3 动画
<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 动画的更多相关文章
- JS模拟CSS3动画-贝塞尔曲线
一.什么是贝塞尔曲线 1962年,法国工程师皮埃尔·贝塞尔(Pierre Bézier),贝塞尔曲线来为为解决汽车的主体的设计问题而发明了贝塞尔曲线.如今,贝赛尔曲线是计算机图形学中相当重要的一种曲线 ...
- js 模拟css3 动画3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 模拟css3 动画1
<html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...
- js 模拟css3 动画2
<html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- wow.js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- 显示层封装及实现与优化（无动画+css3动画+js动画）
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
随机推荐
- MFC无闪烁隐藏窗口
今天需要用到将窗口的程序隐藏,但是如果在OnInitDialog()中,直接写: ShowWindow(SW_HIDE); 是无效的,因为这本身就是个初始化窗口函数.也就是说,窗口在并没有显示出来的时 ...
- restful规范整理
restful的十条规范 restful一共有十条规范,但其并不是规定.可以不去遵守,是一种软件风格 1.API与客户端交互,通常使用https协议 2.域名:https://api.baidu.co ...
- split根据一个元素分割语句
a = ‘https://www.baidu.com/s?wd=%E7%AE%80%E4%B9%A6&rsv_spt=1&rsv_iqid=0xdfa3666f00083a6f& ...
- java学习笔记38（sql注入攻击及解决方法）
上一篇我们写了jdbc工具类:JDBCUtils ,在这里我们使用该工具类来连接数据库, 在之前我们使用 Statement接口下的executeQuery(sql)方法来执行搜索语句,但是这个接口并 ...
- C# 日志记录分级功能使用 按照日期，大小，或是单文件存储
本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...
- Linux下截屏方法
参考百度经验 https://jingyan.baidu.com/article/48a42057c8e8dfa92525047c.html 第一种: 截屏部分画面并保存 快捷键Shift+PrtSc
- RN用蓝牙接入热敏打印机和智能电子秤(转载)
最近要为app用蓝牙接入便携热敏打印机和读蓝牙电子秤.作为一名前端,能涉及到硬件的开发让我觉得兴奋不已,所以我立刻着手开始相应的预研.并把遇到的知识点和问题记录下来. btw,大部分知识点未深入可能有 ...
- Zookeeper之入门（原理、基础知识）
Zookeeper介绍 Zookeeper是分布式应用程序的协调服务框架,是Hadoop的重要组件.ZK要解决的问题: 1.分布式环境下的数据一致性. 2.分布式环境下的统一命名服务 3.分布式环境下 ...
- Maven用途
1.使用Maven编译项目,命令是:“mvncompile” 在命令行中,进入pom.xml所在目录,输入命令即可. 2.使用Maven清理项目,命令是:“mvnclean” 3.使用Maven测试项 ...
- EtherCAT 要点
倍福: 1.倍福的每个从站模块(IO模块)一般都有转换时间而这些时间会导致从站模块输出数值存在延迟,举例:当在15:00开始调用API让主站板卡输出数据,而用示波器实际检测到模块输出数值的时间大约在1 ...