虽然现在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. SQL复制一个表的数据到另一个表

    最近做一个项目,由于客户数据量大,为了不将数据彻底删除,于是将数据移动到历史表,原始表的数据删除.由于技术有限,想不到好的方法,于是写个存储过程 执行,为了防止执行过程中出现异常,执行不完整.用到hI ...

  2. rocketmq简单搭建

    摘要: 简单的部署管理RocketMQ队列 (nameserver broker在同一机器上) RocketMQ 是alibaba开源的消息队列. 本文使用的是开源版本v3.18 系统: centos ...

  3. 03-组合逻辑电路设计之译码器——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线——普利斯队长精心奉献 课程目标:    1. 再次熟悉Quartus II工程的建立以及完整的FPGA开发流程 2. 以译码器为例学会简单组合逻辑电路设计 实验平台:无 实验原理: 组合逻辑, ...

  4. css3实现轮播

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. [转]关于 initWithNibName 和 loadNibNamed 的区别和联系

    转载地址:http://jianyu996.blog.163.com/blog/static/1121145552012102293653906/ 关于 initWithNibName 和 loadN ...

  6. noi 4978 宠物小精灵之收服

    题目链接:http://noi.openjudge.cn/ch0206/4978/ 二维费用背包 在最后找还剩多少体力的时候,直接找到第二维,当结果 f[n][i] == f[n][m] 时,就说明已 ...

  7. [多校联考2 T3] 排列 (DP)

    DP Description 对于一个排列,考虑相邻的两个元素,如果后面一个比前面一个大,表示这个位置是上升的,用 I 表示,反之这个位置是下降的,用 D表示.如排列 3,1,2,7,4,6,5 可以 ...

  8. linux内核3.4基于wakeup_source的autosleep机制分析

    点击打开链接 一:wakeup_source简介: linux 3.4内核PM使用了wakeup_source来保持唤醒状态,也就是keep awake.之前android一直是基于Linux加入了w ...

  9. Linux设置ssh无密码登陆

    最近在折腾Hadoop,要用到主机间无密码登陆,设置的时候遇到了一些问题,这里记录一下. 假设A需要无密码登陆B. 那么首先需要在A上使用ssh-keygen生成id_rsa.pub的公钥,生成时,一 ...

  10. lua中string.find()函数作用于汉字字符串

    lua中有这样一个库函数,string,find(),作用是在一个字符串中找到目标字符串的起始和结束位置(从1开始计数) 如:a,b=string.find("hello world&quo ...