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) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
随机推荐
- Git 使用教程
Git 使用教程 更详细请参考:廖雪峰的官方网站 - Git教程 1. 安装Git客户端软件 Git for Windows http://msysgit.github.io/ 2. 创建版本库 两点 ...
- 插件开发-UI插件开发
1.新建类库解决方案,引入命名空间,同时引入要添加UI Form的WebPart(在Portal\UILib目录下) 2.继续UFSoft.UBF.UI.Custom.ExtendedPartBase ...
- Js dom操作总结
1.选取文档元素 1.1. getElemenById 基于唯一id获取,任何HTML元素可以有id属性,在文档中该值必须唯一. 1.2. getElementsByName 基于name属性的值选取 ...
- 在重新生成解决方案时，出现的错误：无法将文件“obj\x86\Debug\*.exe”复制到“obj\Debug\*.exe”。文件正由另一进程使用，因此该进程无法访问此文件
此例是VS2010的CS项目. 在重新生成解决方案时,出现的错误. 解决步骤:先关闭解决方案,再在项目文件下的bin\Debug\*.exe删除这类之前生成得.exe文件,再在VS2010下重新生成.
- jq变态全选vs原生变态全选
<script> $(function(){ var num=0; $("#btn").on('click',function(){ if(this.checked){ ...
- HBase 安装
HBase 集群安装 1.上传tar包,解压tar包 tar -zxvf hbase-1.1.5-bin.tar.gz 2.修改配置文件 进入 hbase/conf/ 在文件 regionserve ...
- 13 个免费的 PNG 图像的优化和压缩工具
图像格式有许多种不同类型,在互联网上最常见的有JPEG.GIF.BMP.TIFF和PNG.每一种图像格式都有它自己的用途,比如GIF是用于动画的,JPEG是用于高清图片的,这种图片在保存或者调整大小后 ...
- asp.net Lodop实现批量打印
1.列表(前台) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="w_stu ...
- ubuntu-kylin16.04搭建lamp环境。
首先下载安装apache2 输入:sudo apt-get install apache2 安装完毕后,在浏览器中输入:localhost 显示如下图,说明安装正确. 紧接着安装php7.0 输入:s ...
- java-方法练习
一.定义方法的最主要的两个步骤: 1.先明确结果(即返回值类型要先明确) 2. 在实现功能时是否有未知内容参与运算,即明确函数的参数列表(参数类型,参数个数) 例如:定义一个九九乘法表的功能. 思路 ...