Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 76574
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
一个原生的类似jquery的JS动画插件

分类： Html/Css

2014-07-17 10:34:00


点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>类似jquery的JS动画插件</title>
  6.         <style type="text/css">
  7.             #test{
  8.                 position:absolute;
  9.                 width:100px;
  10.                 height:100px;
  11.                 left:100px;
  12.                 top:100px;
  13.                 background-color:#99F;    
  14.             }
  15.         </style>
  16.         <script type="text/javascript">
  17.             /*
  18.              * ALAnime Util 模块
  19.              * 该模块提供基础方法,请优先加载该模块
  20.              */
  21.             (function(win, Anime){
  22.                 var rgb = /rgb\((\d+), ?(\d+), ?(\d+)\)/i,
  23.                     hex = /^#([0-9a-fA-F]{6})$/i,
  24.                     shex = /^#([0-9a-fA-F]{3})$/i,
  25.                     merge = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/i;
  26.                 
  27.                 var haspx = /px$/i,
  28.                     pxval = /\d+/i,
  29.                     iscolor = /(?:rgb)|#/i;
  30.                     
  31.                 /*
  32.                  * ALAnime 主配置参数
  33.                  * 请不要直接更改这个属性,若要更改,请调用Setting函数
  34.                  */
  35.                 Anime._prop = {
  36.                     interval : 1    // ALAnime在调用setTimeout时所指定的时间间隔
  37.                 };
  38.                 
  39.                 /*
  40.                  * ALAnime 主配置更改函数 (public function)
  41.                  * 若指定参数,那么将设置更改主配置,否则取得主配置
  42.                  */
  43.                 Anime.setting = function(option){
  44.                     if(option){
  45.                         for(var prop in option){
  46.                             Anime._prop[prop] = option[prop];
  47.                         }
  48.                     }else{
  49.                         return Anime._prop;
  50.                     }
  51.                 };
  52.                 
  53.                 /*
  54.                  * 转换一个CSS的值 (private function)
  55.                  * 若为 33px 则去掉px
  56.                  * 若为颜色 则转换成整数
  57.                  */
  58.                 var parseCss = function(css){
  59.                     if(haspx.test(css)){
  60.                         return parseInt(css.match(pxval))    
  61.                     }else if(iscolor.test(css)){
  62.                         return Anime._convertColorToInt(css);
  63.                     }else{
  64.                         return css;
  65.                     }
  66.                 };
  67.                 
  68.                 /*
  69.                  * 转换目标样式的值 (private function)
  70.                  * 若为 33px 则去掉px
  71.                  * 若为颜色 则转换成整数
  72.                  */
  73.                 Anime._parseTargetStyle = function(targetstyle){
  74.                     for(var i in targetstyle){
  75.                         targetstyle[i] = parseCss(targetstyle[i]);
  76.                     }
  77.                     
  78.                     return targetstyle;
  79.                 }
  80.                 
  81.                 /*
  82.                  * 取得元素实际样式 (private function)
  83.                  * element 要取得样式的元素
  84.                  * css 要取得的样式,驼峰写法
  85.                  * 若省略css参数则返回整体style,否则返回特定,并且去掉所有带有px的px
  86.                  * 若css为string那么取得特定的样式
  87.                  * 若css为object那么取得所有object key所对应的对象
  88.                  */
  89.                 Anime._getStyle = function(element, css){
  90.                     var style = element.currentStyle
  91.                         || win.document.defaultView.getComputedStyle(element, null);
  92.                         
  93.                     if(!css){    // 取得总体样式
  94.                         return style;
  95.                         
  96.                     }else{
  97.                         if(typeof(css) == "string"){    // 取得特定的样式, 并且若样式结尾带px则去掉px,转换颜色
  98.                             return parseCss(style[css]);
  99.                             
  100.                         }else if(typeof(css) == "object"){    // 取得样式集合, 并且若样式结尾带px则去掉px,转换颜色
  101.                             var rval = {};
  102.                             for(var i in css){
  103.                                 rval[i] = parseCss(style[i]);
  104.                             }
  105.                             
  106.                             return rval;
  107.                         }
  108.                     }
  109.                 };
  110.                 
  111.                 /*
  112.                  * 将一个颜色字符串转换为INT类型的颜色 (private function)
  113.                  * color 颜色字符串
  114.                  */
  115.                 Anime._convertColorToInt = function(color){
  116.                     var matcher = null,
  117.                         r,
  118.                         g,
  119.                         b;
  120.                     
  121.                     if(rgb.test(color)){    // 处理rgb颜色
  122.                         matcher = rgb.exec(color);
  123.                         r = parseInt(matcher[1], 10) << 16;
  124.                         g = parseInt(matcher[2], 10) << 8;
  125.                         b = parseInt(matcher[3], 10);
  126.                         return r | g | b;
  127.                         
  128.                     }else if(hex.test(color)){
  129.                         matcher = hex.exec(color);
  130.                         return parseInt(matcher[1], 16);
  131.                         
  132.                     }else if(shex.test(color)){                        
  133.                         return parseInt(color.replace(merge, "$1$1$2$2$3$3"), 16);
  134.                         
  135.                     }else{
  136.                         return undefined;    
  137.                         
  138.                     }
  139.                 };
  140.                 
  141.                 /*
  142.                  * 将一个整数转换为#ffffff形式的color (private function)
  143.                  * color 颜色整数
  144.                  */
  145.                 Anime._convertIntToColor = function(color){
  146.                     var r,
  147.                         g,
  148.                         b;
  149.                     
  150.                     if(typeof(color) == "number"){
  151.                         r = (color >> 16) & 255;
  152.                         g = (color >> 8) & 255;
  153.                         b = color & 255;
  154.                         
  155.                         r = r < 10 ? r.toString(16) + r.toString(16) : r.toString(16);
  156.                         g = g < 10 ? g.toString(16) + g.toString(16) : g.toString(16);
  157.                         b = b < 10 ? b.toString(16) + b.toString(16) : b.toString(16);
  158.                         
  159.                         return "#" + r + g + b;
  160.                     }else{
  161.                         return undefined;    
  162.                     }
  163.                 };
  164.                 
  165.                 
  166.                 // 转交控制权
  167.                 win.ALAnime = Anime;
  168.             }(window, window.ALAnime || {}));
  169.             
  170.             
  171.             
  172.             
  173.             
  174.             /*
  175.              * ALAnime Anime 模块
  176.              * 该模块提供ALAnime的动画
  177.              */
  178.             (function(win, Anime){
  179.                 var animeList = [],            // 动画队列
  180.                     animeTimeout;            // 动画播放计时器
  181.                 
  182.                 /*
  183.                  * 在播放动画前计算 (private function)
  184.                  * 这个方法将在播放前计算播放函数所需的所有参数
  185.                  * 返回的对象如下
  186.                  * {
  187.                  * element 播放动画的元素
  188.                  * srcStyle 原始的Style条目
  189.                  * tarStyle 目标Style条目
  190.                  * stepStyle 播放Style中各个条目一单位所需要的毫秒列表
  191.                  * startTime 动画开始播放时间
  192.                  * lastTime 最后播放时间
  193.                  * passedTime 动画已经播放了多少毫秒
  194.                  * animeTime 动画预定在多少毫秒内播放完毕
  195.                  * isNextStop 动画是否在下次播放时候立即停止,被停止的动画将被移出动画队列 stop
  196.                  * isNextFinish 动画是否在下次播放时候立即完成,被完成的动画将被移除动画队列 stop(true)
  197.                  * }
  198.                  */
  199.                 var _beforeAnime = function(element, styles, keeptime){
  200.                     var timenow = new Date();
  201.                     
  202.                     var rval = {};
  203.                     rval.element = element;
  204.                     rval.animeTime = keeptime;
  205.                     
  206.                     // 计算原始style
  207.                     rval.srcStyle = Anime._getStyle(element, styles);
  208.                     rval.tarStyle = Anime._parseTargetStyle(styles);
  209.                     
  210.                     // 计算stepStyle
  211.                     var steps = {};
  212.                     for(var i in rval.srcStyle){
  213.                         steps[i] = (rval.tarStyle[i] - rval.srcStyle[i]) / keeptime;
  214.                     }
  215.                     rval.stepStyle = steps;
  216.                     
  217.                     
  218.                     isNextStop = 0;
  219.                     isNextFinish = 0;
  220.                     
  221.                     rval.startTime = timenow;
  222.                     rval.lastTime = timenow;
  223.                     rval.passedTime = 0;
  224.                     
  225.                     return rval;
  226.                 };
  227.                 
  228.                 
  229.                 /*
  230.                  * 设置快速完成 (private function)
  231.                  * animeobj 播放动画对象也就是animeList[i]中的对象
  232.                  */
  233.                 var _setfinish = function(animeobj){
  234.                     var tarstyle = animeobj.tarStyle;
  235.                     var element = animeobj.element;
  236.                     
  237.                     for(var i in tarstyle){
  238.                         switch(i){
  239.                             case "width":
  240.                             case "height":
  241.                             case "left":
  242.                             case "top":
  243.                                 element.style[i] = tarstyle[i] + "px";
  244.                                 break;
  245.                             
  246.                             case "color":
  247.                             case "backgroundColor":
  248.                                 element.style[i] = Anime._convertIntToColor(tarstyle[i]);
  249.                                 break;    
  250.                         }
  251.                     }
  252.                     
  253.                 };
  254.                 
  255.                 /*
  256.                  * 实际播放动画函数 (private function)
  257.                  * animeobj 播放动画对象也就是animeList[i]中的对
  258.                  */
  259.                 var _showanime = function(animeobj){
  260.                     var passedtime = animeobj.passedTime;
  261.                     var stepstyle = animeobj.stepStyle;
  262.                     var element = animeobj.element;
  263.                     var srcstyle = animeobj.srcStyle;
  264.                     
  265.                     for(var i in stepstyle){
  266.                         switch(i){
  267.                             case "width":
  268.                             case "height":
  269.                             case "left":
  270.                             case "top":
  271.                                 element.style[i] = parseInt(srcstyle[i] + passedtime * stepstyle[i]) + "px"
  272.                                 break;
  273.                             
  274.                             case "color":
  275.                             case "backgroundColor":
  276.                                 element.style[i] = Anime._convertIntToColor(parseInt(srcstyle[i] + passedtime * stepstyle[i]));
  277.                                 break;    
  278.                         }
  279.                     }
  280.                         
  281.                 };
  282.                 
  283.                 /*
  284.                  * 实际播放动画函数 (private function)
  285.                  */
  286.                 var _anime = function anime(){                    
  287.                     var timenow = new Date();
  288.                     
  289.                     clearTimeout(animeTimeout);
  290.                     animeTimeout = setTimeout(function(){
  291.                         
  292.                         for(var i=0; i<animeList.length; i+=1){
  293.                             // 否则判断是否应该停止
  294.                             if(animeList[i].isNextStop){    // 如果设置了停止标示,那么直接从队列中移除这个动画
  295.                                 //console.debug(animeList[i] + " 立即停止");
  296.                                 
  297.                                 if(animeList[i].isNextFinish){    // 如果设置了快速完成标示那么快速完成,并且从队列中移除
  298.                                     //console.debug(animeList[i] + " 快速完成");
  299.                                     _setfinish(animeList[i]);    // 完成播放动画
  300.                                 }
  301.                                 
  302.                                 animeList.splice(i,1);    
  303.                                 i -= 1;
  304.                             }else{    // 正常播放动画
  305.                                 animeList[i].passedTime += timenow - animeList[i].lastTime;
  306.                                 
  307.                                 
  308.                                 if(animeList[i].passedTime >= animeList[i].animeTime){    // 将播放完成的动画切换到完成状态,并且从队列中移除
  309.                                     //console.debug(animeList[i] + " 播放完成 用时 " + animeList[i].passedTime);
  310.                                     
  311.                                     _setfinish(animeList[i]);    // 完成播放动画
  312.                                     
  313.                                     // 快速切换至播放完毕
  314.                                     animeList.splice(i,1);    
  315.                                     i -= 1;
  316.                                 }else{
  317.                                     _showanime(animeList[i]);
  318.                                     
  319.                                     animeList[i].lastTime = timenow;
  320.                                     //console.debug(animeList[i]);
  321.                                     //console.debug(animeList[i] + " 正在播放 用时 " + animeList[i].passedTime);
  322.                                 }
  323.                                 
  324.                             }
  325.                         
  326.                         }
  327.                         
  328.                         // 如果动画队列还有未播放的动画,那么再次播放动画
  329.                         if(animeList.length > 0){
  330.                             anime.call(win);    
  331.                         }
  332.                     }, Anime.setting().interval);
  333.                 };
  334.                 
  335.                 
  336.                 /*
  337.                  * 播放动画函数 (public function)
  338.                  * element 要播放动画的对象
  339.                  * styles 预到达的效果
  340.                  * keeptime 在多少毫秒达到此效果 等价于 animeTime
  341.                  * 这个方法会调用_beforeAnime方法用于生成播放动画所需对象
  342.                  * 然后调用内部_anime播放动画
  343.                  */
  344.                 Anime.anime = function(element, styles, keeptime){
  345.                     animeList.push(_beforeAnime(element, styles, keeptime));
  346.                     _anime.call(win);
  347.                     
  348.                     return Anime;
  349.                 };
  350.                 
  351.                 /*
  352.                  * 停止指定动画
  353.                  * element 欲停止动画的元素
  354.                  * quickfinish 是否快速切换到完成状态
  355.                  */
  356.                 Anime.stop = function(element, quickfinish){
  357.                     for(var i=0; i<animeList.length; i+=1){
  358.                         if(animeList[i].element == element){
  359.                             animeList[i].isNextStop = true;
  360.                             if(quickfinish === true){
  361.                                 animeList[i].isNextFinish = true;
  362.                             }
  363.                         }
  364.                     }
  365.                     
  366.                     return Anime;
  367.                 };
  368.                 
  369.                 /*
  370.                  * 停止所有动画
  371.                  * quickfinish 是否快速切换到完成状态
  372.                  */
  373.                 Anime.stopall = function(quickfinish){
  374.                     for(var i=0; i<animeList.length; i+=1){
  375.                         animeList[i].isNextStop = true;
  376.                         if(quickfinish === true){
  377.                             animeList[i].isNextFinish = true;
  378.                         }
  379.                     }
  380.                     
  381.                     return Anime;    
  382.                 };
  383.                 // 转交控制权
  384.                 win.ALAnime = Anime;
  385.             }(window, window.ALAnime || {}));
  386.             // 测试代码
  387.             window.onload = function(){
  388.                 document.getElementById("btntest").onclick = function(event){
  389.                     //alert(ALAnime._convertColorToInt("#f0f"));
  390.                     //alert(parseInt("ff00ff", 16));
  391.                     //alert(ALAnime._convertIntToColor(43143214));
  392.                     //alert(ALAnime._getStyle(this, "left"));
  393.                     ALAnime.anime(document.getElementById("test"), {left : 300, top : 300, width : 500, backgroundColor : "#ff00ff"}, 1000);
  394.                     //ALAnime.stop(document.getElementById("test"), true);
  395.                     //ALAnime.stopall(true);
  396.                 };
  397.             };
  398.             
  399.         </script>
  400.     </head>
  401.     
  402.     <body>
  403.         <input id="btntest" type="button" value="test" />
  404.         <div id="test"></div>
  405.     </body>
  406. </html>

点击(此处)折叠或打开

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>类似jquery的JS动画插件</title>
  6.         <style type="text/css">
  7.             #test{
  8.                 position:absolute;
  9.                 width:100px;
  10.                 height:100px;
  11.                 left:100px;
  12.                 top:100px;
  13.                 background-color:#99F;    
  14.             }
  15.         </style>
  16.         <script type="text/javascript">
  17.             /*
  18.              * ALAnime Util 模块
  19.              * 该模块提供基础方法,请优先加载该模块
  20.              */
  21.             (function(win, Anime){
  22.                 var rgb = /rgb\((\d+), ?(\d+), ?(\d+)\)/i,
  23.                     hex = /^#([0-9a-fA-F]{6})$/i,
  24.                     shex = /^#([0-9a-fA-F]{3})$/i,
  25.                     merge = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/i;
  26.                 
  27.                 var haspx = /px$/i,
  28.                     pxval = /\d+/i,
  29.                     iscolor = /(?:rgb)|#/i;
  30.                     
  31.                 /*
  32.                  * ALAnime 主配置参数
  33.                  * 请不要直接更改这个属性,若要更改,请调用Setting函数
  34.                  */
  35.                 Anime._prop = {
  36.                     interval : 1    // ALAnime在调用setTimeout时所指定的时间间隔
  37.                 };
  38.                 
  39.                 /*
  40.                  * ALAnime 主配置更改函数 (public function)
  41.                  * 若指定参数,那么将设置更改主配置,否则取得主配置
  42.                  */
  43.                 Anime.setting = function(option){
  44.                     if(option){
  45.                         for(var prop in option){
  46.                             Anime._prop[prop] = option[prop];
  47.                         }
  48.                     }else{
  49.                         return Anime._prop;
  50.                     }
  51.                 };
  52.                 
  53.                 /*
  54.                  * 转换一个CSS的值 (private function)
  55.                  * 若为 33px 则去掉px
  56.                  * 若为颜色 则转换成整数
  57.                  */
  58.                 var parseCss = function(css){
  59.                     if(haspx.test(css)){
  60.                         return parseInt(css.match(pxval))    
  61.                     }else if(iscolor.test(css)){
  62.                         return Anime._convertColorToInt(css);
  63.                     }else{
  64.                         return css;
  65.                     }
  66.                 };
  67.                 
  68.                 /*
  69.                  * 转换目标样式的值 (private function)
  70.                  * 若为 33px 则去掉px
  71.                  * 若为颜色 则转换成整数
  72.                  */
  73.                 Anime._parseTargetStyle = function(targetstyle){
  74.                     for(var i in targetstyle){
  75.                         targetstyle[i] = parseCss(targetstyle[i]);
  76.                     }
  77.                     
  78.                     return targetstyle;
  79.                 }
  80.                 
  81.                 /*
  82.                  * 取得元素实际样式 (private function)
  83.                  * element 要取得样式的元素
  84.                  * css 要取得的样式,驼峰写法
  85.                  * 若省略css参数则返回整体style,否则返回特定,并且去掉所有带有px的px
  86.                  * 若css为string那么取得特定的样式
  87.                  * 若css为object那么取得所有object key所对应的对象
  88.                  */
  89.                 Anime._getStyle = function(element, css){
  90.                     var style = element.currentStyle
  91.                         || win.document.defaultView.getComputedStyle(element, null);
  92.                         
  93.                     if(!css){    // 取得总体样式
  94.                         return style;
  95.                         
  96.                     }else{
  97.                         if(typeof(css) == "string"){    // 取得特定的样式, 并且若样式结尾带px则去掉px,转换颜色
  98.                             return parseCss(style[css]);
  99.                             
  100.                         }else if(typeof(css) == "object"){    // 取得样式集合, 并且若样式结尾带px则去掉px,转换颜色
  101.                             var rval = {};
  102.                             for(var i in css){
  103.                                 rval[i] = parseCss(style[i]);
  104.                             }
  105.                             
  106.                             return rval;
  107.                         }
  108.                     }
  109.                 };
  110.                 
  111.                 /*
  112.                  * 将一个颜色字符串转换为INT类型的颜色 (private function)
  113.                  * color 颜色字符串
  114.                  */
  115.                 Anime._convertColorToInt = function(color){
  116.                     var matcher = null,
  117.                         r,
  118.                         g,
  119.                         b;
  120.                     
  121.                     if(rgb.test(color)){    // 处理rgb颜色
  122.                         matcher = rgb.exec(color);
  123.                         r = parseInt(matcher[1], 10) << 16;
  124.                         g = parseInt(matcher[2], 10) << 8;
  125.                         b = parseInt(matcher[3], 10);
  126.                         return r | g | b;
  127.                         
  128.                     }else if(hex.test(color)){
  129.                         matcher = hex.exec(color);
  130.                         return parseInt(matcher[1], 16);
  131.                         
  132.                     }else if(shex.test(color)){                        
  133.                         return parseInt(color.replace(merge, "$1$1$2$2$3$3"), 16);
  134.                         
  135.                     }else{
  136.                         return undefined;    
  137.                         
  138.                     }
  139.                 };
  140.                 
  141.                 /*
  142.                  * 将一个整数转换为#ffffff形式的color (private function)
  143.                  * color 颜色整数
  144.                  */
  145.                 Anime._convertIntToColor = function(color){
  146.                     var r,
  147.                         g,
  148.                         b;
  149.                     
  150.                     if(typeof(color) == "number"){
  151.                         r = (color >> 16) & 255;
  152.                         g = (color >> 8) & 255;
  153.                         b = color & 255;
  154.                         
  155.                         r = r < 10 ? r.toString(16) + r.toString(16) : r.toString(16);
  156.                         g = g < 10 ? g.toString(16) + g.toString(16) : g.toString(16);
  157.                         b = b < 10 ? b.toString(16) + b.toString(16) : b.toString(16);
  158.                         
  159.                         return "#" + r + g + b;
  160.                     }else{
  161.                         return undefined;    
  162.                     }
  163.                 };
  164.                 
  165.                 
  166.                 // 转交控制权
  167.                 win.ALAnime = Anime;
  168.             }(window, window.ALAnime || {}));
  169.             
  170.             
  171.             
  172.             
  173.             
  174.             /*
  175.              * ALAnime Anime 模块
  176.              * 该模块提供ALAnime的动画
  177.              */
  178.             (function(win, Anime){
  179.                 var animeList = [],            // 动画队列
  180.                     animeTimeout;            // 动画播放计时器
  181.                 
  182.                 /*
  183.                  * 在播放动画前计算 (private function)
  184.                  * 这个方法将在播放前计算播放函数所需的所有参数
  185.                  * 返回的对象如下
  186.                  * {
  187.                  * element 播放动画的元素
  188.                  * srcStyle 原始的Style条目
  189.                  * tarStyle 目标Style条目
  190.                  * stepStyle 播放Style中各个条目一单位所需要的毫秒列表
  191.                  * startTime 动画开始播放时间
  192.                  * lastTime 最后播放时间
  193.                  * passedTime 动画已经播放了多少毫秒
  194.                  * animeTime 动画预定在多少毫秒内播放完毕
  195.                  * isNextStop 动画是否在下次播放时候立即停止,被停止的动画将被移出动画队列 stop
  196.                  * isNextFinish 动画是否在下次播放时候立即完成,被完成的动画将被移除动画队列 stop(true)
  197.                  * }
  198.                  */
  199.                 var _beforeAnime = function(element, styles, keeptime){
  200.                     var timenow = new Date();
  201.                     
  202.                     var rval = {};
  203.                     rval.element = element;
  204.                     rval.animeTime = keeptime;
  205.                     
  206.                     // 计算原始style
  207.                     rval.srcStyle = Anime._getStyle(element, styles);
  208.                     rval.tarStyle = Anime._parseTargetStyle(styles);
  209.                     
  210.                     // 计算stepStyle
  211.                     var steps = {};
  212.                     for(var i in rval.srcStyle){
  213.                         steps[i] = (rval.tarStyle[i] - rval.srcStyle[i]) / keeptime;
  214.                     }
  215.                     rval.stepStyle = steps;
  216.                     
  217.                     
  218.                     isNextStop = 0;
  219.                     isNextFinish = 0;
  220.                     
  221.                     rval.startTime = timenow;
  222.                     rval.lastTime = timenow;
  223.                     rval.passedTime = 0;
  224.                     
  225.                     return rval;
  226.                 };
  227.                 
  228.                 
  229.                 /*
  230.                  * 设置快速完成 (private function)
  231.                  * animeobj 播放动画对象也就是animeList[i]中的对象
  232.                  */
  233.                 var _setfinish = function(animeobj){
  234.                     var tarstyle = animeobj.tarStyle;
  235.                     var element = animeobj.element;
  236.                     
  237.                     for(var i in tarstyle){
  238.                         switch(i){
  239.                             case "width":
  240.                             case "height":
  241.                             case "left":
  242.                             case "top":
  243.                                 element.style[i] = tarstyle[i] + "px";
  244.                                 break;
  245.                             
  246.                             case "color":
  247.                             case "backgroundColor":
  248.                                 element.style[i] = Anime._convertIntToColor(tarstyle[i]);
  249.                                 break;    
  250.                         }
  251.                     }
  252.                     
  253.                 };
  254.                 
  255.                 /*
  256.                  * 实际播放动画函数 (private function)
  257.                  * animeobj 播放动画对象也就是animeList[i]中的对
  258.                  */
  259.                 var _showanime = function(animeobj){
  260.                     var passedtime = animeobj.passedTime;
  261.                     var stepstyle = animeobj.stepStyle;
  262.                     var element = animeobj.element;
  263.                     var srcstyle = animeobj.srcStyle;
  264.                     
  265.                     for(var i in stepstyle){
  266.                         switch(i){
  267.                             case "width":
  268.                             case "height":
  269.                             case "left":
  270.                             case "top":
  271.                                 element.style[i] = parseInt(srcstyle[i] + passedtime * stepstyle[i]) + "px"
  272.                                 break;
  273.                             
  274.                             case "color":
  275.                             case "backgroundColor":
  276.                                 element.style[i] = Anime._convertIntToColor(parseInt(srcstyle[i] + passedtime * stepstyle[i]));
  277.                                 break;    
  278.                         }
  279.                     }
  280.                         
  281.                 };
  282.                 
  283.                 /*
  284.                  * 实际播放动画函数 (private function)
  285.                  */
  286.                 var _anime = function anime(){                    
  287.                     var timenow = new Date();
  288.                     
  289.                     clearTimeout(animeTimeout);
  290.                     animeTimeout = setTimeout(function(){
  291.                         
  292.                         for(var i=0; i<animeList.length; i+=1){
  293.                             // 否则判断是否应该停止
  294.                             if(animeList[i].isNextStop){    // 如果设置了停止标示,那么直接从队列中移除这个动画
  295.                                 //console.debug(animeList[i] + " 立即停止");
  296.                                 
  297.                                 if(animeList[i].isNextFinish){    // 如果设置了快速完成标示那么快速完成,并且从队列中移除
  298.                                     //console.debug(animeList[i] + " 快速完成");
  299.                                     _setfinish(animeList[i]);    // 完成播放动画
  300.                                 }
  301.                                 
  302.                                 animeList.splice(i,1);    
  303.                                 i -= 1;
  304.                             }else{    // 正常播放动画
  305.                                 animeList[i].passedTime += timenow - animeList[i].lastTime;
  306.                                 
  307.                                 
  308.                                 if(animeList[i].passedTime >= animeList[i].animeTime){    // 将播放完成的动画切换到完成状态,并且从队列中移除
  309.                                     //console.debug(animeList[i] + " 播放完成 用时 " + animeList[i].passedTime);
  310.                                     
  311.                                     _setfinish(animeList[i]);    // 完成播放动画
  312.                                     
  313.                                     // 快速切换至播放完毕
  314.                                     animeList.splice(i,1);    
  315.                                     i -= 1;
  316.                                 }else{
  317.                                     _showanime(animeList[i]);
  318.                                     
  319.                                     animeList[i].lastTime = timenow;
  320.                                     //console.debug(animeList[i]);
  321.                                     //console.debug(animeList[i] + " 正在播放 用时 " + animeList[i].passedTime);
  322.                                 }
  323.                                 
  324.                             }
  325.                         
  326.                         }
  327.                         
  328.                         // 如果动画队列还有未播放的动画,那么再次播放动画
  329.                         if(animeList.length > 0){
  330.                             anime.call(win);    
  331.                         }
  332.                     }, Anime.setting().interval);
  333.                 };
  334.                 
  335.                 
  336.                 /*
  337.                  * 播放动画函数 (public function)
  338.                  * element 要播放动画的对象
  339.                  * styles 预到达的效果
  340.                  * keeptime 在多少毫秒达到此效果 等价于 animeTime
  341.                  * 这个方法会调用_beforeAnime方法用于生成播放动画所需对象
  342.                  * 然后调用内部_anime播放动画
  343.                  */
  344.                 Anime.anime = function(element, styles, keeptime){
  345.                     animeList.push(_beforeAnime(element, styles, keeptime));
  346.                     _anime.call(win);
  347.                     
  348.                     return Anime;
  349.                 };
  350.                 
  351.                 /*
  352.                  * 停止指定动画
  353.                  * element 欲停止动画的元素
  354.                  * quickfinish 是否快速切换到完成状态
  355.                  */
  356.                 Anime.stop = function(element, quickfinish){
  357.                     for(var i=0; i<animeList.length; i+=1){
  358.                         if(animeList[i].element == element){
  359.                             animeList[i].isNextStop = true;
  360.                             if(quickfinish === true){
  361.                                 animeList[i].isNextFinish = true;
  362.                             }
  363.                         }
  364.                     }
  365.                     
  366.                     return Anime;
  367.                 };
  368.                 
  369.                 /*
  370.                  * 停止所有动画
  371.                  * quickfinish 是否快速切换到完成状态
  372.                  */
  373.                 Anime.stopall = function(quickfinish){
  374.                     for(var i=0; i<animeList.length; i+=1){
  375.                         animeList[i].isNextStop = true;
  376.                         if(quickfinish === true){
  377.                             animeList[i].isNextFinish = true;
  378.                         }
  379.                     }
  380.                     
  381.                     return Anime;    
  382.                 };
  383.                 // 转交控制权
  384.                 win.ALAnime = Anime;
  385.             }(window, window.ALAnime || {}));
  386.             // 测试代码
  387.             window.onload = function(){
  388.                 document.getElementById("btntest").onclick = function(event){
  389.                     //alert(ALAnime._convertColorToInt("#f0f"));
  390.                     //alert(parseInt("ff00ff", 16));
  391.                     //alert(ALAnime._convertIntToColor(43143214));
  392.                     //alert(ALAnime._getStyle(this, "left"));
  393.                     ALAnime.anime(document.getElementById("test"), {left : 300, top : 300, width : 500, backgroundColor : "#ff00ff"}, 1000);
  394.                     //ALAnime.stop(document.getElementById("test"), true);
  395.                     //ALAnime.stopall(true);
  396.                 };
  397.             };
  398.             
  399.         </script>
  400.     </head>
  401.     
  402.     <body>
  403.         <input id="btntest" type="button" value="test" />
  404.         <div id="test"></div>
  405.     </body>
  406. </html>


阅读(291) | 评论(0) | 转发(0) |
0

上一篇：jQuery根据命名空间，删除事件

下一篇：Js自动判断标题应当填何值

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6