开启左侧

[CSS] 原生JS实现的类似JQuery动画插件

[复制链接]
发表于 2012-4-13 17:31:14 | 显示全部楼层 |阅读模式
一个原生JS写的类似JQuery动画的插件,目前只支持移动和大小调整以及颜色渐变(非常垃圾)
求大大给一点颜色渐变的思路...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>无标题文档</title>  <style type="text/css">   #test{    position:absolute;    width:100px;    height:100px;    left:100px;    top:100px;    background-color:#99F;    }  </style>  <script type="text/javascript">   /*    * ALAnime Util 模块    * 该模块提供基础方法,请优先加载该模块    */   (function(win, Anime){    var rgb = /rgb\((\d+), ?(\d+), ?(\d+)\)/i,     hex = /^#([0-9a-fA-F]{6})$/i,     shex = /^#([0-9a-fA-F]{3})$/i,     merge = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/i;        var haspx = /px$/i,     pxval = /\d+/i,     iscolor = /(?:rgb)|#/i;         /*     * ALAnime 主配置参数     * 请不要直接更改这个属性,若要更改,请调用Setting函数     */    Anime._prop = {     interval : 1 // ALAnime在调用setTimeout时所指定的时间间隔    };        /*     * ALAnime 主配置更改函数 (public function)     * 若指定参数,那么将设置更改主配置,否则取得主配置     */    Anime.setting = function(option){     if(option){      for(var prop in option){       Anime._prop[prop] = option[prop];      }     }else{      return Anime._prop;     }    };        /*     * 转换一个CSS的值 (private function)     * 若为 33px 则去掉px     * 若为颜色 则转换成整数     */    var parseCss = function(css){     if(haspx.test(css)){      return parseInt(css.match(pxval))      }else if(iscolor.test(css)){      return Anime._convertColorToInt(css);     }else{      return css;     }    };        /*     * 转换目标样式的值 (private function)     * 若为 33px 则去掉px     * 若为颜色 则转换成整数     */    Anime._parseTargetStyle = function(targetstyle){     for(var i in targetstyle){      targetstyle[i] = parseCss(targetstyle[i]);     }          return targetstyle;    }        /*     * 取得元素实际样式 (private function)     * element 要取得样式的元素     * css 要取得的样式,驼峰写法     * 若省略css参数则返回整体style,否则返回特定,并且去掉所有带有px的px     * 若css为string那么取得特定的样式     * 若css为object那么取得所有object key所对应的对象     */    Anime._getStyle = function(element, css){     var style = element.currentStyle      || win.document.defaultView.getComputedStyle(element, null);           if(!css){ // 取得总体样式      return style;           }else{      if(typeof(css) == "string"){ // 取得特定的样式, 并且若样式结尾带px则去掉px,转换颜色       return parseCss(style[css]);             }else if(typeof(css) == "object"){ // 取得样式集合, 并且若样式结尾带px则去掉px,转换颜色       var rval = {};       for(var i in css){        rval[i] = parseCss(style[i]);       }              return rval;      }     }    };        /*     * 将一个颜色字符串转换为INT类型的颜色 (private function)     * color 颜色字符串     */    Anime._convertColorToInt = function(color){     var matcher = null,      r,      g,      b;          if(rgb.test(color)){ // 处理rgb颜色      matcher = rgb.exec(color);      r = parseInt(matcher[1], 10) << 16;      g = parseInt(matcher[2], 10) << 8;      b = parseInt(matcher[3], 10);      return r | g | b;           }else if(hex.test(color)){      matcher = hex.exec(color);      return parseInt(matcher[1], 16);           }else if(shex.test(color)){            return parseInt(color.replace(merge, "$1$1$2$2$3$3"), 16);           }else{      return undefined;            }    };        /*     * 将一个整数转换为#ffffff形式的color (private function)     * color 颜色整数     */    Anime._convertIntToColor = function(color){     var r,      g,      b;          if(typeof(color) == "number"){      r = (color >> 16) & 255;      g = (color >> 8) & 255;      b = color & 255;            r = r < 10 ? r.toString(16) + r.toString(16) : r.toString(16);      g = g < 10 ? g.toString(16) + g.toString(16) : g.toString(16);      b = b < 10 ? b.toString(16) + b.toString(16) : b.toString(16);            return "#" + r + g + b;     }else{      return undefined;      }    };            // 转交控制权    win.ALAnime = Anime;   }(window, window.ALAnime || {}));                  /*    * ALAnime Anime 模块    * 该模块提供ALAnime的动画    */   (function(win, Anime){    var animeList = [],   // 动画队列     animeTimeout;   // 动画播放计时器        /*     * 在播放动画前计算 (private function)     * 这个方法将在播放前计算播放函数所需的所有参数     * 返回的对象如下     * {     * element 播放动画的元素     * srcStyle 原始的Style条目     * tarStyle 目标Style条目     * stepStyle 播放Style中各个条目一单位所需要的毫秒列表     * startTime 动画开始播放时间     * lastTime 最后播放时间     * passedTime 动画已经播放了多少毫秒     * animeTime 动画预定在多少毫秒内播放完毕     * isNextStop 动画是否在下次播放时候立即停止,被停止的动画将被移出动画队列 stop     * isNextFinish 动画是否在下次播放时候立即完成,被完成的动画将被移除动画队列 stop(true)     * }     */    var _beforeAnime = function(element, styles, keeptime){     var timenow = new Date();          var rval = {};     rval.element = element;     rval.animeTime = keeptime;          // 计算原始style     rval.srcStyle = Anime._getStyle(element, styles);     rval.tarStyle = Anime._parseTargetStyle(styles);          // 计算stepStyle     var steps = {};     for(var i in rval.srcStyle){      steps[i] = (rval.tarStyle[i] - rval.srcStyle[i]) / keeptime;     }     rval.stepStyle = steps;               isNextStop = 0;     isNextFinish = 0;          rval.startTime = timenow;     rval.lastTime = timenow;     rval.passedTime = 0;          return rval;    };            /*     * 设置快速完成 (private function)     * animeobj 播放动画对象也就是animeList[i]中的对象     */    var _setfinish = function(animeobj){     var tarstyle = animeobj.tarStyle;     var element = animeobj.element;          for(var i in tarstyle){      switch(i){       case "width":       case "height":       case "left":       case "top":        element.style[i] = tarstyle[i] + "px";        break;              case "color":       case "backgroundColor":        element.style[i] = Anime._convertIntToColor(tarstyle[i]);        break;       }     }         };        /*     * 实际播放动画函数 (private function)     * animeobj 播放动画对象也就是animeList[i]中的对     */    var _showanime = function(animeobj){     var passedtime = animeobj.passedTime;     var stepstyle = animeobj.stepStyle;     var element = animeobj.element;     var srcstyle = animeobj.srcStyle;          for(var i in stepstyle){      switch(i){       case "width":       case "height":       case "left":       case "top":        element.style[i] = parseInt(srcstyle[i] + passedtime * stepstyle[i]) + "px"        break;              case "color":       case "backgroundColor":        element.style[i] = Anime._convertIntToColor(parseInt(srcstyle[i] + passedtime * stepstyle[i]));        break;       }     }          };        /*     * 实际播放动画函数 (private function)     */    var _anime = function anime(){          var timenow = new Date();          clearTimeout(animeTimeout);     animeTimeout = setTimeout(function(){            for(var i=0; i<animeList.length; i+=1){       // 否则判断是否应该停止       if(animeList[i].isNextStop){ // 如果设置了停止标示,那么直接从队列中移除这个动画        //console.debug(animeList[i] + " 立即停止");                if(animeList[i].isNextFinish){ // 如果设置了快速完成标示那么快速完成,并且从队列中移除         //console.debug(animeList[i] + " 快速完成");         _setfinish(animeList[i]); // 完成播放动画        }                animeList.splice(i,1);         i -= 1;       }else{ // 正常播放动画        animeList[i].passedTime += timenow - animeList[i].lastTime;                        if(animeList[i].passedTime >= animeList[i].animeTime){ // 将播放完成的动画切换到完成状态,并且从队列中移除         //console.debug(animeList[i] + " 播放完成 用时 " + animeList[i].passedTime);
平度网:www.pingdu.co 平度论坛:bbs.pingdu.co
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

 
QQ在线咨询
售前咨询热线
0532-88371356
售后服务微信
pingduwangzhan
快速回复 返回顶部 返回列表