（42）JS运动之多物体框架--多个div变宽
假设仅仅为div加入一个定时器的话。在多个div变宽的时候会发生故障。可是假设为每一个div加入一个定时器。那么就能够实现多个物体变宽。
注意：在多物体运动的情况下，全部东西不能共用。offsetXXX会跟border冲突导致不能得到想要的结果。在这里能够用getStyle（）函数取代。
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:100px;
height:50px;
background:red;
margin:10px;
} </style> <script> window.onload=function (){
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
aDiv[i].timer=null;//自己定义属性，加一个定时器
aDiv[i].onmouseover=function ()
{
startMove(this,400);
};
aDiv[i].onmouseout=function ()
{
startMove(this,100);
};
}
}; var timer=null;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0? Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width=obj.offsetWidth+speed+'px';
}
}, 30);
} </script>
</head>
<body >
<div ></div>
<div ></div>
<div ></div> </body>
</html>
效果图：
（42）JS运动之多物体框架--多个div变宽的更多相关文章
- js运动：多div变宽、二级菜单
定时器及运动函数. 多div变宽: <!-- Author: XiaoWen Create a file: 2016-12-13 09:36:30 Last modified: 2016-12- ...
- （36）JS运动之使物体向右运动
基本思路:样式要是绝对定位,不然的话根本走不起来.当开启一个定时器的时候.必须先清除定时器.这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止 ...
- JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript学习总结【11】、JS 运动
动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...
- 第十节 JS运动中级
链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...
- 第九节 JS运动应用
多物体运动框架 多个物体同时运动 例子:多个Div,鼠标移入变宽 单定时器,存在问题 每个Div一个定时器 <!DOCTYPE html> <html lang="en&q ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
随机推荐
- 【BZOJ 2118】 2118: 墨墨的等式 （最短路）
2118: 墨墨的等式 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求 ...
- BZOJ 1040：[ZJOI2008]骑士（环套外向树+树形DP）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1040 [题目大意] 给出环套外向树森林,求最大权独立集. [题解] 我们对于每个连通块 ...
- 【计算几何】【分类讨论】Gym - 101243I - Land Division
题意:给你一个n个点的凸包,让你切一刀,使得它变成一个m边形和一个K边形,问你切的这一刀最短是多少. 如果m+K==n+4,那么一定切在两条边上,但是由于两个线段间的最短距离,至少会经过一条线段的一个 ...
- [NOIp2016提高组]蚯蚓
题目大意: 给你n个不同长度蚯蚓,每秒从里面取出最长的砍下u/v变成两只,又把剩下的加长q. 问你在m之前的t,2t,3t...的时间上,砍的蚯蚓长度, 以及m秒后剩下所有的蚯蚓长度. 思路: 很容易 ...
- NOI 二分算法练习
1.NOI 二分法求函数的零点 总时间限制: 1000ms 内存限制: 65536kB 描述 有函数: f(x) = x5 - 15 * x4+ 85 * x3- 225 * x2+ 274 * ...
- Educational Codeforces Round 9 D. Longest Subsequence dp
D. Longest Subsequence 题目连接: http://www.codeforces.com/contest/632/problem/D Description You are giv ...
- HMAC的JAVA实现和应用
1.简介: HMACSHA1 是从SHA1 哈希函数构造的一种键控哈希算法,被用作 HMAC(基于哈希的消息验证代码). 此 HMAC 进程将密钥与消息数据混合,使用哈希函数对混合结果进行哈希计算,将 ...
- new placement 的使用
#include <iostream> #include "TModel.h" int main() { ]; std::cout<<"Sourc ...
- Android疑难杂症之KillProcess 和System.exit 无效
以下所讲,浓缩在 https://github.com/wytings/CrashDemo 首先就这个名字来说,kill了process 或者 system.exit确实已经把APP杀掉了,特别是当你 ...
- 详解java中的数据结构
线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.本文试图通过简单的描述,向读者阐述各个类的作用以 ...