首頁  >  文章  >  web前端  >  javascript運動框架的實例程式碼分享

javascript運動框架的實例程式碼分享

零下一度
零下一度原創
2017-06-24 14:37:331315瀏覽

 在div上加上邊框,border:1px solid black

window.onload = function(){
      var div = document.getElementById('div1');

      div.onclick = function(){
          setInterval(function(){
              #.style.widdivth = 1.W       },30)
            }
}

敲玩程式碼我們可以發現,寬度應該是一直在減,但是呢。反而增加了,這是為什麼呢?

 原來關於offset這一些系列的屬性都會存在這些問題,下面就來糾正一下

      1、currentStyle是當前的樣式,但是不兼容谷歌和火狐

# 2.getComputedStyle是計算後的樣式,不相容ie8--

    具體程式碼如下:

傳的參數obj指的是取得的對象,name是樣式屬性

function getStyle(obj,name){

          //currentStyle:目前的樣式
            if(obj.currentStyle){
 火狐
}else{
                //getComputedStyle:計算後的樣式
                return getComputedStyle(obj,false) name      }

下一步我們就需要把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];//不相容於Google和火狐
}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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn