[js高手之路]面向对象版本匀速运动框架

这篇文章的效果，需要看过以下3篇文章：

[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

[js高手之路]打造通用的匀速运动框架

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>通用的面向对象匀速运动框架 - by ghostwu</title>
  6     <style>
  7         div {
  8             width: 200px;
  9             height: 200px;
 10             background: red;
 11             margin:20px;
 12         }
 13     </style>
 14     <script>
 15         ( function(){
 16             function css( obj, name ){
 17                 if ( obj.currentStyle ) {
 18                     return obj.currentStyle[name];
 19                 }else {
 20                     return getComputedStyle( obj, false )[name];
 21                 }
 22             }
 23             var ghostwu = {};
 24             ghostwu.linear = {
 25                 A : function( option ){
 26                     return new ghostwu.linear.init( option );
 27                 }
 28             };
 29             ghostwu.linear.init = function( option ){
 30                 this.opt = {
 31                     'selector' : '',
 32                     'css-name' : {},
 33                     'speed' : 10,
 34                     'cb' : undefined
 35                 }
 36                 for( var key in option ){
 37                     this.opt[key] = option[key];
 38                 }
 39                 this.ele = document.querySelector( this.opt['selector'] );
 40                 this.bindEvent();
 41             }
 42             ghostwu.linear.init.prototype.bindEvent = function() {
 43                 var _this = this;
 44                 this.ele.onmouseover = function(){
 45                     _this.animate( this );
 46                 };
 47                 this.ele.onmouseout = function(){
 48                     _this.animate( this );
 49                 }
 50             }
 51             ghostwu.linear.init.prototype.animate = function(){
 52                 var cur = 0, _this = this;
 53                 clearInterval(_this['ele'].timer);
 54                 _this['ele'].timer = setInterval(function () {
 55                     var bFlag = true;
 56                     for (var key in _this.opt['css-name']) {
 57                         if (key == 'opacity') {
 58                             cur = css(_this.ele, 'opacity') * 100;
 59                         } else {
 60                             cur = parseInt(css(_this.ele, key));
 61                         }
 62                         var target = _this.opt['css-name'][key];
 63                         if (cur != target) {
 64                             bFlag = false;
 65                             if (key == 'opacity') {
 66                                 _this['ele'].style.opacity = ( cur + _this.opt['speed'] ) / 100;
 67                                 _this['ele'].style.filter = "alpha(opacity:" + (cur + _this.opt['speed']) + ")";
 68                             } else {
 69                                 _this['ele'].style[key] = cur + _this.opt['speed'] + "px";
 70                             }
 71                         }
 72                     }
 73 
 74                     if (bFlag) {
 75                         clearInterval(_this['ele'].timer);
 76                         _this.opt['cb'] && _this.opt['cb'].call( _this['ele'] );
 77                     }
 78                 }, 1000 / 16 );
 79             }
 80             window.g = ghostwu;
 81         } )();
 82         window.onload = function() {
 83             g.linear.A({
 84                 'selector' : '#box',
 85                 'css-name' : {
 86                     'width' : 300,
 87                     'height' : 400
 88                 }
 89             });
 90             g.linear.A({
 91                 'selector' : '#box2',
 92                 'css-name' : {
 93                     'width' : 300,
 94                     'height' : 400
 95                 }
 96             });
 97         }
 98     </script>
 99 </head>
100 <body>
101     <div id="box"></div>
102     <div id="box2"></div>
103 </body>
104 </html>

鼠标移动到div查看效果:

 
 
posted @ 2017-10-15 11:53  ghostwu  阅读(372)  评论(0)  编辑  收藏  举报
Copyright ©2017 ghostwu