虽然现在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. 虚拟主机无法使用fsockopen操作处理方法

    一.如何禁用fsockopen()下面是两种常用的禁用fsockopen的方法.1.修改php.ini,将 disable_functions = 后加入 fsockopen2.修改php.ini,将 ...

  2. apache svn subversion安装和配置(使用源码安装包方式)

    环境:虚拟机下centos7 1.下载安装包:http://subversion.apache.org/download.cgi 2.上传到指定文件夹并解压 3.安装依赖包 apr apr-utils ...

  3. C# XmlSerializer实现序列化浅析

    C# XmlSerializer类是实现序列化的一个类,那么关于C# XmlSerializer的学习我们要掌握怎么样的操作方法呢?那么这里向你详细介绍具体的操作细节情况. C# XmlSeriali ...

  4. 获取token，绑定微信号，自定义菜单，事件响应demo

    摘要: 这个demo包含了获取token,绑定微信号,设置自定义菜单,响应文本和事件 这个教程的基础篇和提升篇都看完了,总感觉有点隔靴挠痒的感觉,讲的东西我都懂,没有吸收多少新鲜的知识.貌似还没有我这 ...

  5. Linux+I2C总线分析（主要是probe的方式）

    Linux I2C 总线浅析 ㈠ Overview Linux的I2C体系结构分为3个组成部分: ·I2C核心: I2C核心提供了I2C总线驱动和设备驱动的注册.注销方法,I2C通信方法(即“algo ...

  6. 【转】SVN管理多个项目版本库

    转载地址:http://blog.163.com/zhangxuemin_zy/blog/static/10178565520115704031799/ SVN管理多个项目版本库:   安装SVN服务 ...

  7. IDispatch error #3092

    在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...

  8. MariaDB链接超时优化

    查看mysql server超时时间: MariaDB [(none)]> use xspeeder; MariaDB [xspeeder]> show global variables ...

  9. jquery mobile 和phonegap开发总结之三跨域加载页面

    跨域加载 一要进行一定的配置见下面 $( document ).bind( "mobileinit", function() { // Make your jQuery Mobil ...

  10. 怎样去除ul li a标签文字下的下划线

      这个主要是text-decoration属性,颜色的话就是普通的了 <style> ul li a{ text-decoration:none; } ul li a { color: ...