时间:2021-07-01 10:21:17 帮助过:2人阅读
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转换类型
具体代码如下
<script type="text/javascript">
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){
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++;
obj.style[name] = start+ n*step +'px';
if(n == count){
clearInterval(timer)
}
},30)
}
oDiv.onclick = function(){
move(oDiv,'width',800,1000)
}
}
</script>
之前也学过淡入淡出,这个我们可以用透明度来做,那么要怎么做呢?
首先需要判断一下是不是有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);
})
}
}
</script>
待续....
以上就是javascript运动框架的实例代码分享的详细内容,更多请关注Gxl网其它相关文章!