js多物体任意值运动

假如有两个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>

转载于:https://www.cnblogs.com/huaci/p/3866361.html

js多物体任意值运动相关推荐

JS任意元素的任意值运动
函数原型startMove(obj,name,iTag); 例如: startMove(obj,'width',400);//width运动到width:400px startMove(obj,'he ...
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录 0x00 js的运动基础 0x01 单物体运动框架 0x02 多物体运动框架 0x03 改变单一任意值运动框架 0x04 链式运动框架 0x05 改变多值运动框架 0x06 完美运动框架 0x0 ...
js改变宽高字体大小透明度多物体模块运动
改变宽高字体大小透明度 #div1 { width: 100px; height: 100px; background: red; margin: 10px; filter:alpha(opactiy ...
Three.js 后期处理-物体边界线条高亮处理-OutlinePass
Three.js 后期处理-物体边界线条高亮处理-OutlinePass 概述步骤概述本文介绍如何使用three.js的后期处理来制作物体边界线条高亮处理,先来看效果图步骤添加相应的后期处理 ...
【Unity入门】10.物体的运动
[Unity入门]物体的运动大家好,我是Lampard~~ 欢迎来到Unity入门系列博客,所学知识来自B站阿发老师~感谢 (一)用脚本驱动物体移动 (1)制作一台运动的小车 ...
点滴积累【JS】---JS小功能（JS实现多物体缓冲运动)
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 1 <head ...
js实现左右来回运动效果实例
实现js基础运动那么一定要了解css的定位方式position分为固定定位fixed .relative .absolute fixed 固定元素在页面上 relative 绝对定位不会脱标 abs ...
pygame里面物体闪烁运动_教师资格【试讲示范】高中物理试讲答辩——《自由落体运动》试讲稿答辩...
试讲备课纸教学过程各位考官: 大家好,我是高中物理组的***号考生,我试讲的题目是<自由落体运动>,下面开始我的试讲. 一.导入新课同学们,老师手里现在拿着一个小笔记本和一张纸,现在 ...
pygame里面物体闪烁运动_利用自闪烁发光二极管探究小车在倾斜轨道上的运动规律...
2020年11月23日,周一,24小时安全值班.利用当班中午的时间,微主在创客空间测试了自闪烁发光二极管在匀加速运动中的效果,结果还比较满意. 将小车放置在倾斜的轨道上,将自闪烁发光二极管和纽扣电池构 ...
【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

js多物体任意值运动

js多物体任意值运动相关推荐

最新文章

热门文章