javascript封裝動畫函式(勻速、變速)
勻速動畫函式--------任意一個元素移動到指定的目標位置(水平方向)
function animate(element,target){
//先清理定時器
clearInterval(element.timeId);
//定時器的id儲存到物件的一個屬性中,為了清理定時器(只能產生一個定時器)
element.timeId=setInterval(function(){
//獲取元素的當前位置
var current=element.offsetLeft;
//元素每次移動多少畫素
var step=10;
//判斷是向左走還是向右走
step=current<target?step:-step;
//每次移動後的距離
current+=step;
//判斷當前移動後的位置是否到達目標位置
if(Math.abs(target-current)>Math.abs(step)){
element.style.left=current+"px";
}else{
//清理定時器
clearInterval(element.timeId);
element.style.left=target+"px";
}
},20);
}
變速動畫函式(緩動動畫)--------任意一個元素移動到指定的目標位置(水平方向)
function animate(element,target){
//先清理定時器
clearInterval(element.timeId);
//定時器的id儲存到物件的一個屬性中,,為了清理定時器
element.timeId=setInterval(function(){
//獲取元素的當前位置
var current=element.offsetLeft;
//元素每次移動多少畫素
var step=(target-current)/10;
//判斷是向左走還是向右走
step=step>0?Math.ceil(step):Math.floor(step);
//每次移動後的距離
current+=step;
element.style.left=current+"px";
if(current==target){
//清理定時器
clearInterval(element.timeId);
}
},20);
}
相關文章
- javascript元素勻速運動程式碼例項JavaScript
- canvas水平勻速運動效果Canvas
- 關於緩動動畫函式的封裝動畫函式封裝
- 封裝一個簡單的動畫函式封裝動畫函式
- JavaScript 裝飾器極速指南JavaScript
- CSS速刷 - CSS動畫CSS動畫
- WebAPIs-06:動畫函式封裝 + 觸屏事件WebAPI動畫函式封裝事件
- JavaScript - 獲取字串位元組數(函式封裝)JavaScript字串函式封裝
- jq封裝函式封裝函式
- php函式封裝PHP函式封裝
- 記錄--進度條真的是勻速的,不信你看
- 基於matlab程式設計二維空間內目標作勻速直線運動和勻速圓周運動的特點原始碼Matlab程式設計原始碼
- 前端常用函式封裝前端函式封裝
- 常用js函式封裝JS函式封裝
- javascript原生封裝一個淡入淡出效果的函式JavaScript封裝函式
- 【封裝小技巧】列表處理函式的封裝封裝函式
- JSONP 通用函式封裝JSON函式封裝
- 競速(四):JavaScript的未來JavaScript
- 競速(一):JavaScript引擎家譜JavaScript
- 前端 javascript 練習題--Math、Data及函式封裝【千鋒】前端JavaScript函式封裝
- 封裝javascript事件處理函式繫結和解綁程式碼封裝JavaScript事件函式
- 我自己的Javascript 庫,封裝了一些常用函式JavaScript封裝函式
- 【封裝小技巧】數字處理函式的封裝封裝函式
- Javascript 函式和變數提升JavaScript函式變數
- python怎麼封裝函式Python封裝函式
- 封裝帶引數的函式封裝函式
- 【JavaScript框架封裝】實現一個類似於JQuery的動畫框架的封裝JavaScript框架封裝jQuery動畫
- 競速(三):JavaScript編譯器策略JavaScript編譯
- 從A到Z,26個實用Python模組/函式速覽Python函式
- 動畫封裝小案例動畫封裝
- win10怎麼提高網速 讓網速變快的操作方法Win10
- JavaScript 變數與函式宣告前置JavaScript變數函式
- imac裝win10系統網速變慢怎麼辦_imac裝win10系統網速非常慢如何解決MacWin10
- 那些年我封裝的 JS 函式封裝JS函式
- 競速(二): JavaScript編譯器如何工作JavaScript編譯
- JavaScript之坑了我--BOM模型速知JavaScript模型
- Go 之基礎速學 (五) golang 裡函式以及函式之間引數的傳遞Golang函式
- Tiptronic手自一體化變速箱