無(wú)限循環(huán)輪播圖之運(yùn)動(dòng)框架(原生JS實(shí)現(xiàn))
更新時(shí)間：2017年10月01日 09:29:49 作者：NT.Wang
下面小編就為大家?guī)?lái)一篇無(wú)限循環(huán)輪播圖之運(yùn)動(dòng)框架(原生JS實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
封裝運(yùn)動(dòng)框架
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function move(obj,json,options){
var options=options || {};
var duration=options.duration || 800;
var easing=options.easing || 'linear';
var n=0;
var start={};
var dis={};
var count=Math.ceil(duration/30);
//{top:0,left:0}
for(name in json){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(name in json){
switch (easing){
case 'linear':
var a=n/count;
var cur=start[name]+dis[name]*a;
break;
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
}
if(name=='opacity'){
obj.style[name]=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}
以上這篇無(wú)限循環(huán)輪播圖之運(yùn)動(dòng)框架(原生JS實(shí)現(xiàn))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap每天必學(xué)之警告框插件,使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript實(shí)現(xiàn)寫(xiě)入文件到本地的方法【基于FileSaver.js插件】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)寫(xiě)入文件到本地的方法,結(jié)合實(shí)例形式分析了基于FileSaver.js插件實(shí)現(xiàn)保存文件到本地的相關(guān)操作技巧,并附帶FileSaver.js插件完整源碼,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了ES6中l(wèi)et和const命令的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，對(duì)es6 let const相關(guān)知識(shí)感興趣的朋友一起看下吧2016-08-08
Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法
下面小編就為大家分享一篇Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)攝像頭拍照預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù)實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù),采用純javascript實(shí)現(xiàn)jquery的bind及unbind添加與刪除事件綁定的技巧,具有很好的瀏覽器兼容性,需要的朋友可以參考下2015-08-08
正則表達(dá)式中特殊符號(hào)及正則表達(dá)式的幾種方法總結(jié)(replace,test,search)
這篇文章主要是對(duì)正則表達(dá)式中特殊符號(hào)及正則表達(dá)式的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript實(shí)現(xiàn)瀑布流布局的代碼分享
不知道大家在線(xiàn)上購(gòu)物的時(shí)候有沒(méi)有發(fā)現(xiàn)到，自己逛起來(lái)根本就停不下來(lái)，越往下翻越是覺(jué)得就會(huì)出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來(lái)用JS實(shí)現(xiàn)這一布局，需要的可以參考一下2023-04-04
如何利用Three.js實(shí)現(xiàn)跳一跳小游戲
最近在公司寫(xiě)H5的3D游戲,選擇了ThreeJS去做,做的過(guò)程中遇到了很多問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)跳一跳小游戲的相關(guān)資料,需要的朋友可以參考下2022-04-04