给div加一个边框，border：1px solid black
window.onload = function(){
var div = document.getElementById('div1');
div.onclick = function(){
setInterval(function(){
div.style.width = div.offsetWidth-1+'px'
},30)
}
}
敲玩代码我们可以发现，宽度应该是一直在减，但是呢。反而增加了，这是为什么呢？
原来关于offset这一些系列的属性都会存在这些问题，下面就来纠正一下
1、currentStyle是当前的样式，但是不兼容谷歌和火狐
2、getComputedStyle是计算过后的样式，不兼容ie8--
具体代码如下：
传的参数obj指的是获取的对象，name是样式属性
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
}
下一步我们就需要把move函数进化一下，
需要把start开始的距离从var start = obj.offsetLeft;改为var start = parseFloat(getStyle(obj,name));
因为getStyle(obj,name)获取到的是字符串，所以需要使用parseFloat转换类型
具体代码如下
之前也学过淡入淡出，这个我们可以用透明度来做，那么要怎么做呢？
首先需要判断一下是不是有opacity这个属性，如果有的话需要使用透明度*100，因为透明度是小数。否则的话就继续使用默认的。
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
上述的代码只能从一个方向运动，但是呢我想先向下走500，然后向左走100，这样要怎么做呢？
以前都学过回调函数，如果给他传一个回调函数，是不是就可以了呢？
在运动到目的地的时候，判断是不是有回调函数的存在。如果有则执行，反之不执行。
具体代码如下
window.onload = function(){
var oDiv = document.getElementById('div1');
var timer;
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
}
function move(obj,name,target,dur,fn){
var count = parseInt(dur/30);//总次数
var start = parseFloat(getStyle(obj,name));//开始的距离
var dis = target - start;//距离
// 步长
// var step =dis/count ;
var n = 0;//当前步数
timer = setInterval(function(){
n++;
var cur = start + n*dis/count;
if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}
obj.style[name] = cur +'px';
if(n == count){
clearInterval(timer)
fn && fn();
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'top',500,3000,function(){
move(oDiv,'left',100,500);
})
}
}
待续....
以上是javascript运动框架的实例代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！
