首頁  >  文章  >  web前端  >  javascript運動框架程式碼

javascript運動框架程式碼

PHP中文网
PHP中文网原創
2017-06-20 09:48:411591瀏覽

遲到了好幾天,不好意思哈!
繼續來優化一下javascript運動框架的程式碼。
之前的程式碼有bug,重複點擊時速度會加快,那麼要怎麼解決這個bug呢?

現在我們就來解決一下,
其實很簡單,
在開始運動時,關閉已有計時器。

思考一下:如何讓很多物體同時動,而且他們至今不會互相影響呢。
     1、單獨增加每個物件一個計時器
     2、當滑鼠移進去寬度成長至800,當滑鼠移出時,寬度慢慢減少至原本寬度
具體程式碼如下:
###開始的位置和結束的位置都是隨機的,用JSON來傳遞多個值,那要怎麼寫呢? ###     實現想法:1、把name,target兩個形參改為json###               2、然後使用for in循環中。遍歷屬性和值。 ######在move()函數裡,把開始位置和距離。改為用json###大致就是這樣。 ###                                      var上); ###dis[name] = json[name] - start[name];### }###

運動的時候都有快慢,有運動曲線,這要怎麼寫呢?
寫一個判斷條件,傳一個參數easing,當滿足條件時,相對應的速度快慢。
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linear':
 var cur = start[name] + a*dis[name];
 break;
case 'ease-in':
 var cur = start[name] + Math .pow(a,3)*dis[name];
 break;
case 'ease-out':
 var a = 1-n/count;
 var cur = start[name] + (1-Math.pow(a,3))*dis[name];
 break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}
當然會有預設的,有的不需要設置,預設就可以了。 onload = function(){
var oDiv = document.getElementsByTagName('p')[0];
               var timer;
.樣式
if(obj.currentStyle){
return obj.currentStyle[name];//不相容於Google和火狐
}else{
//getComputedStyle:計算後的樣式
return getComputedStyle(obj,false)[name];//不相容IE8--
}
 }
//complete = dur,easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing | | 'ease-out';

var count = parseInt(complete.dur/30);//總次數
var start = {};//{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json){
start[name] = parseFloat(getStyle(obj,name)) ;
dis[name] = json[name] - start[name];
}
var n = 0;//當前步數
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(complete.easing){
case 'linear':
 var cur = start [name] + a*dis[name];
 break;
case 'ease-in':
 var cur = start[name] + Math.pow(a,3)*dis[name] ;
 break;
case 'ease-out':
 var a = 1-n/count;
 var cur = start[name] + (1-Math.pow(a,3) )*dis[name];
 break;
}



# if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
# }
}

if(n == count){
    clearInterval(obj.timer)
  complete.fn && complete.fn();
}

}, 30)
}

  oDiv.onmouseover = function(){
  move(this,{width:300,height:300},{dur:3000,easing:'ease-in'} )
  }
  oDiv.onmouseout = function(){
  move(this,{width:50,height:50},{dur:3000,fn:function((this,{width:50,height:50},{dur:3000,fn:function(){
# ){
#d ,{opacity:0})
  }})
  }

# }

以上是javascript運動框架程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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