無限循環(huán)輪播圖之運動框架(原生JS實現(xiàn))
更新時間:2017年10月01日 09:29:49 作者:NT.Wang
下面小編就為大家?guī)硪黄獰o限循環(huán)輪播圖之運動框架(原生JS實現(xiàn))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
封裝運動框架
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); }
以上這篇無限循環(huán)輪播圖之運動框架(原生JS實現(xiàn))就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關操作技巧,需要的朋友可以參考下2018-04-04javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js,而且每遇到選項卡就加一點js,造成垃圾低劣代碼逐漸堆積過多了,一直想做一個通用簡潔的選項卡庫。2010-05-05js實現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實現(xiàn)同一頁面可多次調(diào)用的圖片幻燈切換效果,可實現(xiàn)在同一頁面中多次調(diào)用幻燈切換效果,非常具有實用價值,需要的朋友可以參考下2015-02-02基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片
這篇文章主要介紹了基于javascript代碼實現(xiàn)通過點擊圖片顯示原圖片的相關資料,需要的朋友可以參考下2015-11-11