zoukankan      html  css  js  c++  java
  • [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              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查看效果:

     
     
  • 相关阅读:
    670. Maximum Swap
    653. Two Sum IV
    639. Decode Ways II
    636. Exclusive Time of Functions
    621. Task Scheduler
    572. Subtree of Another Tree
    554. Brick Wall
    543. Diameter of Binary Tree
    535. Encode and Decode TinyURL
    博客园自定义背景图片
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7670413.html
Copyright © 2011-2022 走看看