javascript运动框架

Posted 2020-09-23 SailrMoon

紧接着上面写的...

 给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转换类型

具体代码如下

<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>

待续....