js动画之简单运动一
虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客，但是先开始我们的基础动画的学习。
1.制作动画常用的属性就是left,right,height,width,opacity等属性
2.因为每个动画不一定都是匀速的，可能是加速或者更加复杂的，所以就会有缓存动画
3.运动的物体，可能不只有一个，可能是多个，或者一个物体多个属性同事改变做出复杂的运动
4.运动可以连续起来，形成一个动画，这个运动叫做链式运动
开始动手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.animation{
background-color: green;
height: 100px;
width: 100px;
left: 0px;
top: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="test" class="animation">animation</div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementById("test");
var timer = null ;
ele.onmouseover = function(){
startAnimation();
} function startAnimation(){
clearInterval(timer);
var _ele = document.getElementById("test");
timer = setInterval(function(){
if (_ele.offsetLeft == (window.innerWidth-100)){
clearInterval(timer);
};
_ele.style.left = _ele.offsetLeft+ 1 +'px';
},10)
} }
</script>
</html>
1.这个是一个简单的动画效果，在鼠标移动到div上的时候，div就开始往右移动，不过移动的物体的定位最好是绝对定位比较好，因为脱离文档流。
2.每次鼠标进入div的时候，要清除定时器，不要给物体运动的过程中，鼠标再次移入div上，导致生成多个定时，那么速度就会变快。
js动画之简单运动一的更多相关文章
- js动画之简单运动二
透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- js动画之链式运动
链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...
- js动画之缓冲运动
缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...
- js动画之同时运动
一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...
- js动画--链式运动
前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- JS StartMove源码-简单运动框架
这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的.这个源码也简单,理解其原理,自己敲即便也就熟悉了. 用的时候 ...
- js动画学习（二）
四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...
随机推荐
- CoordinatorLayout 自定义Behavior并不难，由简到难手把手带你飞
先来看看最终的效果~~ 本文同步至博主的私人博客wing的地方酒馆 嗯..一个是头像上移的 另一个是模仿UC浏览器的. (PД`q.)你不是说!有三款的吗,怎么只有两款!!!! 不要急嘛... 说了从 ...
- UIButton设置圆角和边框及边框颜色
1. 按钮边框颜色 //设置边框颜色 [btn.layer setMasksToBounds:YES]; [btn.layer setCornerRadius:10.0]; //设置矩形四个圆角半径 ...
- linux初始化配置-----网络配置
一.设置linux网络 1)零时设置ip地址 由于centos7默认没有ifconfig命令所以为了使用方便我们先安装net-tool使我们能使用ifconfig命令查看ip地址 ·挂载系统光盘 [r ...
- Codeforces Round #231 (Div. 2) E.Lightbulb for Minister
题意:有n个点,问在一个m边形内哪个点与这n个点的距离平方和最小 题解:(ai-a0)^2=ai*ai+a0*a0-a*ai*a0 合起来就是a1*a1+...+an*an+n*a0*a0-2*a0* ...
- jquery幻灯片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Android 编译时注解解析框架
2.注解 说道注解,竟然还有各种分类,得,这记不住,我们从注解的作用来反推其分类,帮助大家记忆,然后举例强化大家的记忆,话说注解的作用: 1.标记一些信息,这么说可能太抽象,那么我说,你见过@Over ...
- 2016年12月21日 星期三 --出埃及记 Exodus 21:16
2016年12月21日 星期三 --出埃及记 Exodus 21:16 "Anyone who kidnaps another and either sells him or still h ...
- testng依赖，顺序，跳过
依赖测试@test(dependsOnMethods = {"open"})@testpublic static void open{ System.out.println( ...
- hdu3341Lost's revenge(ac自动机+dp)
链接 类似的dp省赛时就做过了,不过这题卡内存,需要把当前状态hash一下,可以按进制来算出当前的状态,因为所有的状态数是不会超过10*10*10*10的,所以完全可以把这些存下来. 刚开始把trie ...
- 解决JSP路径问题的方法（jsp文件开头path, basePath作用）
原文:http://blog.csdn.net/mingxunzh/article/details/4627185 在JSP中的如果使用 "相对路径" 则有可能会出现问题. 因为 ...