js实现多物体运动框架并兼容各浏览器
首先，我们须要知道在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实现多物体运动框架并兼容各浏览器的更多相关文章
- js多个物体运动问题2
问题1 http://www.cnblogs.com/huaci/p/3854216.html 在上一讲问题1,我们可以整理出2点: 1,定时器作为运动物体的属性 2,startMove方法,参数要传 ...
- 多物体运动框架案例一：多个Div的宽度运动变化
多物体运动框架,鼠标移入Div,此Div逐渐变宽,鼠标移出后,此Div逐渐缩短恢复原长度. <!doctype html> <html> <head> <ti ...
- day40—JavaScript多物体运动框架
转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...
- 【原生JS组件】javascript 运动框架
大家都知道JQuerry有animate方法来给DOM元素进行运动,CSS3中也有transition.transform来进行运动.而使用原生的Javascript来控制元素运动,须要写非常多运动的 ...
- js多个物体运动的问题1
问题2 http://www.cnblogs.com/huaci/p/3854304.html 用js写一个物体的运动很简单.如果一个页面有多个物体在运动,它会不会出问题呢? ok,我们来看一个示例 ...
- js动画---多物体运动
对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...
- JS定时器做物体运动
JS定时器是函数 setInterval(函数体/函数名 , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒 = 1秒 首先我们要知道用JS定时器能干什么? ...
- 【转】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 【原】js实现复制到剪贴板功能，兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
随机推荐
- 25个iptables常用示例
本文将给出25个iptables常用规则示例,这些例子为您提供了些基本的模板,您可以根据特定需求对其进行修改调整以达到期望. 格式 iptables [-t 表名] 选项 [链名] [条件] [-j ...
- Cognos访问权限之让拒绝更友善
关于cognos的访问权限之前我也做了不少总结,但是由于时间关系加上用户也只要实现功能就好,我们做的效果就是像很多人一样,就那样就好了.但是有很多事情,只要你肯动脑筋,你会发现,你还可以做的更好,下面 ...
- Reinvent the Wheel Often
Reinvent the Wheel Often Jason P. Sage Just use something that exists-it's silly to reinvent the whe ...
- C++生成十字绣图案（二） 面向对象
基本的十字绣线性生成中提供了判断下一步可以画的位置并且逐步生成的函数.以这些基本函数为基础,可以进行更多变化的图案设计. 为了方便的扩展,可以把线性生成写成一个类,以后的修改继承这个类. 头文件Bas ...
- 去除icon图标特效,阴影,反光
在icon默认情况: 程序的图标会被apple进行美化, 自动圆角, 加上阴影和反光效果:如果不想要这种效果:在Info.plist中 添加一个Icon already includes gloss ...
- 知识共享图文直播---（一）将数据库中的数据加载到MSFlexGrid空间中再导入Excel
熟话说万物皆有其存在的道理,为什么我突然想写<知识共享图文直播>这个系列呢?首先,我想的是记录自己学习的历程,在记录中加深自己对知识的理解,同时也希望自己的博文能帮助到其他数据库的初学者. ...
- MAC系统XAMPP 中 MySQL命令行client配置使用
在PHP的学习过程中.MySQL预计是必定会接触的. MySQL的管理相信大家也会使用phpmyadmin: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv ...
- VIM显示utf-8文档乱码解决方法
1.相关基础知识介绍 在Vim中.有四个与编码有关的选项,它们是:fileencodings.fileencoding.encoding和termencoding. 在实际使用中.不论什么一个选项出现 ...
- HTML的GET方法传递参数样式。
#HTML的GET方法传递参数样式.http://127.0.0.1:8080/web1/urlinfo/getobject.html?UserId=1&UserName=ad
- MySQL 联合索引测试3
接上一篇文章: http://www.cnblogs.com/xiaoit/p/4430387.html 有时候会出现某字段建立一个索引,但是查看执行计划的时候发现还是全扫了表? 可以强制走下索引看看 ...