虽然现在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动画之简单运动一的更多相关文章

  1. js动画之简单运动二

    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  3. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  4. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  5. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  6. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  7. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  8. JS StartMove源码-简单运动框架

    这几天学习js运动应用课程时,开始接触一个小例子:“仿Flash的图片轮换播放器”,其中使用的StartMove简单运动框架我觉得挺好用的.这个源码也简单,理解其原理,自己敲即便也就熟悉了. 用的时候 ...

  9. js动画学习（二）

    四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...

随机推荐

  1. 编译libjpeg库

    最近在写车牌识别软件,需要用到BMP转成JPG的功能,自然就想到借助libjpeg来实现 OS: win7 64位 编译器: VS2008 1. 下载源代码下载地址:http://www.ijg.or ...

  2. js 的闭包

    今天看了关于js闭包方面的文章,还是有些云里雾里,对于一个菜鸟来说,学习闭包确实有一定的难度,不说别的,能够在网上找到一篇优秀的是那样的不易. 当然之所以闭包难理解,个人觉得是基础知识掌握的不牢,因为 ...

  3. 让keepalived监控NginX的状态

    经过前面的配置,如果主服务器的keepalived停止服务,从服务器会自动接管VIP对外服务:一旦主服务器的keepalived恢复,会重新接管VIP. 但这并不是我们需要的,我们需要的是当NginX ...

  4. VS2010 支持 CSS3

    在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网下载 CSS 3 Intellisense Schema ...

  5. 跟着8张思维导图学习javascript

    学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将po出8张javascript相关的思维导图. 思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又 ...

  6. 50个常用的JQuery代码

    1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“se ...

  7. JSTL函数

    JSTL包含了一系列标准函数. 引入:<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functi ...

  8. python异常和错误(syntax errors 和 exceptions)

    语法错误 语法错误又被称解析错误 >>> for i in range(1..10):print(i) File "<stdin>", line 1 ...

  9. php : 匿名函数(闭包) [一]

    摘自: http://www.cnblogs.com/starlion/p/3894578.html 一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous fu ...

  10. SpringBoot集成jsp（附源码）+遇到的坑

    1.大体步骤 (1)       创建Maven web project: (2)       在pom.xml文件添加依赖: (3)       配置application.properties支持 ...