js 模拟css3 动画1
2024-10-18 08:48:03
<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 myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
*/ //这里的动画距离是没有误差了,但是在执行时间的时候有很大的误差,所以只能改成时间戳的动画!
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内完成移动 的时间是 d=1000*10 (Run,10)的10
var b=0,c=500,d=1000,t=0;
function Run(){
var left = Math.ceil(Tween.Quad.easeOut(t,b,c,d));
move.style.left = left + "px";
console.log('d='+d);
console.log('t='+t);
console.log('left='+left);
o_show_time1.innerHTML = new Date();
if(t>=d){
o_show_time2.innerHTML = new Date();
clearInterval(timer);
timer = null;
// setTimeout(Run, 1);
}
t++;
}
var timer = null;
function start(){
o_show_time0.innerHTML = new Date();
timer = setInterval(Run,10);
} </script> </html>
最新文章
- 让用VS2013编写的程序在XP中顺利运行
- 咱们来聊聊JS中的异步,以及如何异步,菜鸟版
- UIDynamic动画
- 安装python官方的mysql库“mysql-connector-python”
- Servlet------(声明式)异常处理
- JVM底层又是如何实现synchronized的
- Solr高亮显示highlight的三种实现
- Canvas中点到点的路径运动
- obj文件的连接问题以及tlib的基本用法
- 学习ASP.NET的一些学习资源
- SQL Server SQLOS
- InterviewProblems
- [LeetCode]题解(python):007-Reverse Integer
- QCMediaPlayer mediaplayer NOT present(android)
- Centos下_MysqL5.7在使用mysqldump命令备份数据库报错:mysqldump: [Warning] Using a password on the command line interface can be insecure.
- 15 ActionBar 总结
- 显著性检测(saliency detection)评价指标之sAUC(shuffled AUC)的Matlab代码实现
- ArcGIS API for JavaScript 入门教程[4] 代码的骨架
- .Net高级进阶,教你如何构建企业模型数据拦截层,动态控制字段验证
- oracle日期格式化
热门文章
- java面向对象编程(四)--类变量、类方法
- git不添加.idea等IDE配置文件夹
- Python 事件
- python 前端 html
- 使用 JavaScript 截屏
- [LeetCode&;Python] Problem 925. Long Pressed Name
- 20155208徐子涵 《网络对抗》Exp1 PC平台逆向破解
- 《DSP using MATLAB》Problem 7.6
- VS2010添加虚拟机发布的WebService引用
- 多版本opencv管理; find_package()的原理解析