假如有两个div,一个div要变宽,一个div要变高,你怎么写呢?

哎呀,写2个方法啊,一个控制div1变宽,一个控制div2变高啊

那么你的代码,是不是下面这样的呢!

示例:Div变宽和变高

现象:div1在onmouseover时变宽,onmouseout时恢复原大小;

div2在onmouseover时变高,onmouseout时恢复原大小

缺点:重复的代码写了好几个方法

html部分

<div id="div1"></div>
<div id="div2"></div> <style>
div { width:100px; height:150px; margin:20px; background:green;}
</style>

js部分

<script>

window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2"); oDiv1.onmouseover = function(){
startMove1(this,300);
} oDiv1.onmouseout = function(){
startMove1(this,100);
} oDiv2.onmouseover = function(){
startMove2(this,300);
} oDiv2.onmouseout = function(){
startMove2(this,150);
} } function startMove1(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);
} function startMove2(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget - obj.offsetHeight)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.offsetHeight == iTarget){
clearInterval(obj.timer);
} else {
obj.style.height = obj.offsetHeight + speed + "px";
} },30);
} </script>

  

额,上面的代码,本来是一个运动框架的,却写了两个类似的方法。

而且还使用了offset,这是有缺陷的啊

那么,可不可以用一个方法就解决这个问题了呢。

可以的

回想 js你真的了解offsetWidth吗,有没有给我们带来什么启发呢?

http://www.cnblogs.com/huaci/p/3863797.html

对了,利用function getStyle(obj,name),我们就可以控制多个属性值的改变啦

原理:var attr= parseInt(getStyle(obj,name));

修改后的完整代码,如下:

js部分

<script>

window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2"); oDiv1.onmouseover = function(){
startMove(this,"width",300);
} oDiv1.onmouseout = function(){
startMove(this,"width",100);
} oDiv2.onmouseover = function(){
startMove(this,"height",300);
} oDiv2.onmouseout = function(){
startMove(this,"height",150);
} } function startMove(obj,name,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var attr = parseInt(getStyle(obj,name));
var speed = (iTarget - attr)/6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(attr == iTarget){
clearInterval(obj.timer);
} else {
obj.style[name] = attr + speed + "px";
} },30);
} function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
} else{
getComputed(obj,null)[name];
} } </script>

  

js多物体任意值运动的更多相关文章

  1. JS多物体宽度运动案例

    任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...

  2. 简单的JS多物体的运动---运动和透明度的变化

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. NewtonPrincipia_物体的运动_求向心力

    NewtonPrincipia_物体的运动_求向心力 让我们看一下十七世纪的被苹果砸中的艾萨克,是怎样推导出向心力公式的 在现在的观点看来,其中涉及到的很多没有符号表示的微分量.下面的内容只是叙述了推 ...

  4. three.js中物体旋转实践之房门的打开与关闭

    看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵.欧拉角.四元数). ok,下面正式切入主题,房门的打开和关闭,先上图: 正如你所看到的那样,这个“房门”已经被打开了. 一.th ...

  5. [js]多个物体的运动

    与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=func ...

  6. JS之链式运动,及任意值运动框架,包括透明度的改变

    链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...

  7. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...

  9. JS错误记录 - getStyle代替offset、任意值运动框

    本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器.  不是在新定时器开启之后再清除 ...

随机推荐

  1. ipv6加英文的中括号访问

    加英文的中括号就可以,如[2001:4998:c:e33::1004],我发现这是yahoo首页.但并不是所有IPv6网站都可以通过IPv6地址访问,跟IPv4一样,网站服务器端可以只绑定域名,不接受 ...

  2. Libevent使用样例,从简单到复杂

            转载请注明出处:http://blog.csdn.net/luotuo44/article/details/39670221 本文从简单到复杂.展示怎样使用libevent.网上的很多 ...

  3. zzu--2014年11月16日月潭赛 B称号

    1229: Rational Resistance Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 8  Solved: 4 [id=1229" ...

  4. Help Johnny-(类似杭电acm3568题)

    Help Johnny(类似杭电3568题) Description Poor Johnny is so busy this term. His tutor threw lots of hard pr ...

  5. JAVA实现Shell排序

    Shell排序可以理解为插入排序的变种,它充分利用了插入排序的两个特点: (1). 当数据规模小的时候非常高效. (2). 当给定数据已经有序时的时间代价为O(N) 所以,Shell排序每次把数据分成 ...

  6. poj2411(状压dp)

    题目链接:http://poj.org/problem?id=2411 题意:由1*2 的矩形通过组合拼成大矩形,求拼成指定的大矩形有几种拼法. 分析:如果是横着的就定义11,如果竖着的定义为竖着的0 ...

  7. 一个有趣的swap函数

    C语言版: void swap (int a, int b) { a = a ^ b; b = a ^ b; a = a ^ b; } 原理: a ^ a == 0 0 ^ b == b 异或:同则为 ...

  8. 面对多个互斥量的加锁策略:"试加锁-回退"算法/固定加锁层次

    有时一个互斥量是不够的: 比如: 当多个线程同时访问一个队列结构时,你需要2个互斥量,一个用来保护队列头,一个用来保护队列元素内的数据. 当为多线程建立一个树结构时,你可能需要为每个节点设置一个互斥量 ...

  9. Projecet客户端登陆无法通过验证

    客户反映使用Project客户端登陆project服务器的时候,只有域管理员账户才能够登陆成功,其他的账户登陆都无法验证通过,无论是https的方式还是客户端的方式,但是域账户登陆计算机是可以登陆成功 ...

  10. 同步github工程gitcafe

    github固然好.仅仅是国内訪问有点慢. 为了提高博客訪问速度我决定把github上托管的博客同步到gitcafe上.最好能在DNS那里做CDN,可是貌似没有免费的服务.那直接指向gitcafe好了 ...