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>
js多物体任意值运动的更多相关文章
- JS多物体宽度运动案例
任务 对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px. 任务提示: (1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器 ...
- 简单的JS多物体的运动---运动和透明度的变化
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- NewtonPrincipia_物体的运动_求向心力
NewtonPrincipia_物体的运动_求向心力 让我们看一下十七世纪的被苹果砸中的艾萨克,是怎样推导出向心力公式的 在现在的观点看来,其中涉及到的很多没有符号表示的微分量.下面的内容只是叙述了推 ...
- three.js中物体旋转实践之房门的打开与关闭
看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵.欧拉角.四元数). ok,下面正式切入主题,房门的打开和关闭,先上图: 正如你所看到的那样,这个“房门”已经被打开了. 一.th ...
- [js]多个物体的运动
与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=func ...
- JS之链式运动,及任意值运动框架,包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数, function ...
- js多物体运动之淡入淡出效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...
- JS错误记录 - getStyle代替offset、任意值运动框
本次练习错误总结: 1. 改变border的宽度,属性名称不是直接写border,而是borderWidth. 2. 运动函数 -- 清除定时器 -- 开启新的定时器. 不是在新定时器开启之后再清除 ...
随机推荐
- WOJ 1020
#include<stdio.h> #include<stdlib.h> int main() { int n,m; int *num,*link; int i,j,t,k=0 ...
- XML实例文档
from: http://www.w3school.com.cn/xpath/xpath_examples.asp XML实例文档 我们将在下面的例子中使用这个 XML 文档: "books ...
- Windows - Windows的文件名的全路径(Fully Qualified File Name)的最大长度为260字节
例如,你可以做以下实验来验证这个限制值: 在随意文件夹下新建一个文件夹. 在该新建文件夹下创建一个随意文件.使其名字长度不能再输入为止. 把该文件的全路径名copy到Microsoft Word中进行 ...
- Heritrix与Nutch对比
Nutch 开发语言:Java http://lucene.apache.org/nutch/ 简介: Apache的子项目之一,属于Lucene项目下的子项目. Nutch是一个基于Lucene,类 ...
- SSM框架理解(转)
SSM框架理解 最近两星期一直在学JavaEE的MVC框架,因为之前学校开的JavaEE课程就一直学的吊儿郎当的,所以现在真正需要掌握就非常手忙脚乱,在此记录下这段时间学习的感悟,如有错误,希望大牛毫 ...
- 【甘道夫】Win7x64环境下编译Apache Hadoop2.2.0的Eclipse小工具
目标: 编译Apache Hadoop2.2.0在win7x64环境下的Eclipse插件 环境: win7x64家庭普通版 eclipse-jee-kepler-SR1-win32-x86_64.z ...
- ASP.NET 成员资格 Part.2(使用安全控件 Login)
原文:ASP.NET 成员资格 Part.2(使用安全控件 Login) 准备好提供程序以及用户信息的存储,就可以开始构建验证用户.注册用户或者让用户能够重置密码的用户界面了.ASP.N ...
- Linux渗透+SSH内网转发
http://www.jb51.net/hack/58514.html http://blog.chinaunix.net/uid-756931-id-353243.html http://blog. ...
- POJ 1515 Street Directions
题意: 一幅无向图 将尽量多的无向边定向成有向边 使得图强连通 无向图保证是连通的且没有重边 思路: 桥必须是双向的 因此先求边双连通分量 并将桥保存在ans中 每一个双连通分量内的边一定都 ...
- muduo网络图书馆评测
上个月看到朋友推荐mudo网络图书馆,该代码是在国内同行中,开源工程后.甚至钦佩.根据mudo手动和035代码的版本看起来正在建设中.感觉是一个比较成熟且易于使用的网络库.我的手也有自己的网络库,虽然 ...