封装keyframes插件

模仿jquery，使用简单，自动添加浏览器前缀

1 var keyframes = new SHBKerframes();
2 keyframes.define([{
3     name:‘myAnimate‘,
4     0%:{width:100px;height:100px;transform:scale(1);}
5     100%:{width:100px;height:100px;transform:scale(2);}
6 }]);

源码：

 1 /**
 2 *简单的SHBKerframes
 3 *@author:索洪波
 4 *@qq:609690891
 5 *@version:1.0
 6 */
 7 /**
 8 *@SHBKerframes
 9 */
10
11 function SHBKerframes(){
12     this.prefix = ‘‘ ;
13     this.jsPrefix = ‘‘ ;
14     this.styleTag = null ;
15
16     this.init();
17     this.createStyleTag();
18 }
19 SHBKerframes.prototype.init = function(){
20     var domPrefixes = [‘webkit‘, ‘Moz‘, ‘O‘, ‘ms‘, ‘Khtml‘];
21     var style = document.body.style ;
22     if(style.animationName !== undefined) return false;
23     for(var i = 0 ;i < domPrefixes.length ; i ++){
24         if(style[domPrefixes[i]+"AnimationName"] !== undefined){
25             this.animationName = domPrefixes[i] + ‘Animation‘ ;
26             this.prefix = ‘-‘+domPrefixes[i].toLowerCase() + ‘-‘ ;
27             this.jsPrefix = domPrefixes[i] ;
28         }
29     }
30 }
31 SHBKerframes.prototype.createStyleTag = function(css){
32     var style = document.getElementById(‘SHBKeyframes‘) ;
33     if(!style){
34         style = document.createElement(‘style‘) ;
35         style.id = ‘SHBKeyframes‘ ;
36         style.type = ‘text/css‘ ;
37         document.head.appendChild(style);
38     }
39     this.styleTag = style ;
40 }
41 SHBKerframes.prototype.createKeyframes = function(keyframe){
42     var style = document.body.style ;
43     var frameName = keyframe.name ;
44     var css = "" ;
45     css = ‘@‘+this.prefix+‘keyframes ‘+frameName +"{\n" ;
46     for(var key in keyframe){
47         if(key == ‘name‘)continue;
48         css = css + key + ‘{‘ ;
49         for(var attr in keyframe[key]){
50             var jsAttr = attr.toString().replace(/-(\w)/g,function(){return arguments[1].toUpperCase();})
51             if(style[this.jsPrefix+jsAttr.charAt(0).toUpperCase()+jsAttr.substr(1)] !== undefined){
52                 css = css + this.prefix + attr + ‘:‘ + keyframe[key][attr] +‘;‘;
53             }else{
54                 css = css + attr + ‘:‘ + keyframe[key][attr] +‘;‘;
55             }
56         }
57         css += ‘}\n‘ ;
58     }
59     css += ‘}\n‘ ;
60     this.styleTag.appendChild(document.createTextNode(css));
61 }
62 SHBKerframes.prototype.define = function(list){
63     for(var i = 0 ; i < list.length ; i++){
64         this.createKeyframes(list[i]);
65     }
66 }