首先,我们须要知道在js中获取对象的宽度如offsetWidth等。可能会存在一些小小的bug。原因之中的一个在于offsetWidth只不过获取盒子模型中内容的部分宽度。并不包括内边距,边框和外边距。这样会导致控制对象运动与预期不符。这里就不具体的去解释。

而为了解决问题。在这里。我们提供了一个方法来保证我们的运动的准确性。

style仅仅能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。

currentStyle能够弥补style的不足。可是仅仅适用于IE。

getComputedStyle同currentStyle作用同样,可是适用于FF、opera、safari、chrome。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#div1,#div2{width: 200px;height: 100px;background: #800808;margin-bottom: 2em;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
for(var i=0;i<oDiv.length;i++)
{
oDiv[i].timer=null;
oDiv1.onmouseover=function(){ startMove(this,'height',400);
} oDiv1.onmouseout=function(){
startMove(this,'height',100);
} oDiv2.onmouseover=function(){
startMove(this,'width',400);
} oDiv2.onmouseout=function(){
startMove(this,'width',200);
}
}
}
function getStyle(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,null)[attr];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,attr));
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur=='iTarget')
{
clearInterval(obj.timer);
}
else{
obj.style[attr]=cur+speed+"px";
}
},30); }
</script>
</head>
<div id="div1"></div>
<div id="div2"></div>
</html>

在这里注意:

currentStyle和getComputedStyle仅仅能用于获取页面元素的样式,不能用来设置相关值。

假设要设置对应值,应使用style。

js实现多物体运动框架并兼容各浏览器的更多相关文章

  1. js多个物体运动问题2

    问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...

  2. 多物体运动框架案例一:多个Div的宽度运动变化

    多物体运动框架,鼠标移入Div,此Div逐渐变宽,鼠标移出后,此Div逐渐缩短恢复原长度. <!doctype html> <html> <head> <ti ...

  3. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

  4. 【原生JS组件】javascript 运动框架

    大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...

  5. js多个物体运动的问题1

    问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...

  6. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  7. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

  8. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 【原】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

随机推荐

  1. vue组件级路由钩子函数介绍,及实际应用

    正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子 你可以使用 rout ...

  2. 系统出现bootmgr is missing解决方式,戴尔dellserver装系统须要特别注意的问题

    系统出现bootmgr is missing解决方式,戴尔dellserver装系统须要特别注意的问题 欢迎关注http://blog.csdn.net/aaa123524457 转载请注明出处: h ...

  3. [android错误] Installation error: INSTALL_FAILED_VERSION_DOWNGRA

    错误表现: [2014-06-27 18:19:51 - XXX] Installing XXXX.apk... [2014-06-27 18:20:00 - XXX] Installation er ...

  4. POJ_3342_Party_at_Hali-Bula

    #include <iostream> #include <map> #include <cstring> using namespace std; int Gra ...

  5. 触发器五(建立INSTEAD OF触发器)(学习笔记)

    INSTEAD OF触发器 对于简单视图,可以直接执行INSERT,UPDATE和DELETE操作但是对于复杂视图,不允许直接执行INSERT,UPDATE和DELETE操作.为了在具有以上情况的复杂 ...

  6. KVC简介 -字典转模型,模型转字典

    // 下面两个方法.都属于 KVC 的方法 // KVC 是 cocoa 的大招.间接给对象属性设置数值 // 程序运行过程中,动态给对象属性设置数值.不关心 .h 中是怎样定义的 //      仅 ...

  7. TP3.2 APP_DEBUG=false关闭调试后访问不了。页面错误!请稍后再试~

    在APP_DEBUG=true时是没问题的,在APP_DEBUG=false时才会出现找不到模板的问题.  经过排查可能是模板文件找不到问题,之前是这么写的. 改为这个就好了. ----------- ...

  8. 赵雅智:service_bindService生命周期

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhb3lhemhpMjEyOQ==/font/5a6L5L2T/fontsize/400/fill/I0 ...

  9. TOMCAT问题总结

      迁移时间--2017年7月9日14:58:12Author:Marydon CreateTime--2016年12月25日21:55:09Author:MarydonTomcat问题总结问题一 A ...

  10. 【svn】Centos搭建svn服务器环境

    1.需求描述 在Centos系统中搭建svn服务器环境 2.搭建过程 2.1 yum安装svn [root@localhost /]# yum install svn  2.2 新建目录存储svn目录 ...