欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-16 21:11:34
...

这篇文章的效果,需要看过以下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查看效果: