码迷,mamicode.com
首页 > 编程语言 > 详细

javascript运动框架(二)

时间:2017-06-15 23:37:37      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:onclick   etc   tco   对象   ie8   tin   兼容   targe   black   

紧接着上面写的...

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

待续....

javascript运动框架(二)

标签:onclick   etc   tco   对象   ie8   tin   兼容   targe   black   

原文地址:http://www.cnblogs.com/weiyz/p/7015614.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!