js动画之多物体运动
多个物体这不能使用一个定时器了，要给每个物体一个定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体运动</title>
<style>
body{margin: 0px;padding: 0px;}
.animation{
background-color: green;
margin: 10px 0px;
padding: 0px;
height: 100px;
width: 100px;
left: 0px;
top: 0px;
position: relative;
}
</style>
</head>
<body>
<div class="animation">A</div>
<div class="animation">B</div>
<div class="animation">C</div>
</body>
<script type="text/javascript">
window.onload = function(){
var ele = document.getElementsByTagName("div"),
WINDOW_WIDTH = window.innerWidth - 100;
for (var i = 0; i < ele.length; i++) {
ele[i].timer = null;
ele[i].onmouseover = function(){
startAnimation(this);
}
}; function startAnimation(obj){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var _left = obj.offsetLeft,
_speed = Math.ceil((WINDOW_WIDTH - _left)/100); if (obj.offsetLeft >= WINDOW_WIDTH){
clearInterval(obj.timer);
}else{
obj.style.left = obj.offsetLeft+ _speed +'px';
console.log(obj.style.left);
console.log(obj.offsetLeft);
} },1)
} }
</script>
</html>
这里给每个div加上一个定时器~~ 还要注意的就是给body加上margin:0px;padding:0px;如果不加的话，那么obj.style.left和obj.offsetLeft是不会相等（因为我们这里使用的是相对定位）
js动画之多物体运动的更多相关文章
- js动画 Css提供的运动 js提供的运动
1. 动画 (1) Css样式提供了运动 过渡的属性transition 从一种情况到另一种情况叫过渡 Transition:attr time linear delay: ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- js动画之简单运动一
虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...
- js多个物体运动问题2
问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...
- js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- JS定时器做物体运动
JS定时器是函数 setInterval(函数体/函数名 , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒 = 1秒 首先我们要知道用JS定时器能干什么? ...
- js 运动函数篇 (一) （匀速运动、缓冲运动、多物体运动、多物体不同值运动、多物体多值运动）层层深入
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写 匀速运动.缓冲运动.多物体运 ...
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
随机推荐
- HTML5扩展之微数据与丰富网页摘要
一.微数据是? 一个页面的内容,例如人物.事件或评论不仅要给用户看,还要让机器可识别.而目前机器智能程度有限,要让其知会特定内容含义,我们需要使用规定的标签.属性名以及特定用法等.举个简单例子,我们使 ...
- Struts2中Action的使用(Struts2_Action)
一.Action概要 二.动态调用 三.通配符(规则:*_*等价于{1_2}) 四.获取参数 1 1.方式一:逐个获取(推荐使用) 2 package com.aaron.action.param ...
- laravel 实现上传 excel
//导入电话号码 public function postTel(){ set_time_limit(0); ini_set('memory_limit','1024M'); $params = In ...
- 解决hibernate删除时的异常
由于关联关系是一对多和多对一的关系,于是在代码中需要删除多的一方的对象时出现了 deleted object would be re-saved by cascade (remove deleted ...
- maven-web项目中的一些小问题
1.最新的jetty容器 org.eclipse.jetty 需要JDK1.8的支持. 2.在容器中发布WEB项目时web 中的pom.xml的依赖关系会丧失,依赖和插件需要单独完全编写(尽管IDE会 ...
- Rdseed与SAC的安装
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- UINavigationController导航控制器初始化 导航控制器栈的push和pop跳转理解
(1)导航控制器初始化的时候一般都有一个根视图控制器,导航控制器相当于一个栈,里面装的是视图控制器,最先进去的在最下面,最后进去的在最上面.在最上面的那个视图控制器的视图就是这个导航控制器对外展示的界 ...
- C#基础2
namespace 基础 //定义一个命名空间,为基础 { class Program //定义一个名称为Program的类 { static void Main(string[] args) //这 ...
- 从下往上看--新皮层资料的读后感 第三部分 70年前的逆向推演- 从NN到ANN
第三部分 NN-ANN 70年前的逆向推演 从这部分开始,调整一下视角主要学习神经网络算法,将其与生物神经网络进行横向的比较,以窥探一二. 现在基于NN的AI应用几乎是满地都是,效果也不错,这种貌似神 ...
- Linux 常用命令集合
1. 常用命令 ls 显示当前目录下的文件和文件夹: -ltr 按时间顺序显示文件和文件夹的详细信息,不带参数的时候 只显示文件夹和文件. vi 打开文件的内容 tar -cvf file.tar ...