当前位置:Gxlcms > JavaScript > 无限循环轮播图之运动框架(原生JS实现)

无限循环轮播图之运动框架(原生JS实现)

时间:2021-07-01 10:21:17 帮助过:31人阅读

封装运动框架

  1. function getStyle(obj,name){
  2. if(obj.currentStyle){
  3. return obj.currentStyle[name];
  4. }else{
  5. return getComputedStyle(obj,false)[name];
  6. }
  7. }
  8. function move(obj,json,options){
  9. var options=options || {};
  10. var duration=options.duration || 800;
  11. var easing=options.easing || 'linear';
  12. var n=0;
  13. var start={};
  14. var dis={};
  15. var count=Math.ceil(duration/30);
  16. //{top:0,left:0}
  17. for(name in json){
  18. start[name]=parseFloat(getStyle(obj,name));
  19. dis[name]=json[name]-start[name];
  20. }
  21. clearInterval(obj.timer);
  22. obj.timer=setInterval(function(){
  23. n++;
  24. for(name in json){
  25. switch (easing){
  26. case 'linear':
  27. var a=n/count;
  28. var cur=start[name]+dis[name]*a;
  29. break;
  30. case 'ease-out':
  31. var a=1-n/count;
  32. var cur=start[name]+dis[name]*(1-a*a*a);
  33. break;
  34. case 'ease-in':
  35. var a=n/count;
  36. var cur=start[name]+dis[name]*a*a*a;
  37. break;
  38. }
  39. if(name=='opacity'){
  40. obj.style[name]=cur;
  41. }else{
  42. obj.style[name]=cur+'px';
  43. }
  44. }
  45. if(n==count){
  46. clearInterval(obj.timer);
  47. options.complete && options.complete();
  48. }
  49. },30);
  50. }

以上这篇无限循环轮播图之运动框架(原生JS实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行