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

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

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

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

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>通用的面向对象匀速运动框架 - by ghostwu</title>

     <style>

         div {

             width: 200px;

             height: 200px;

             background: red;

             margin:20px;

         }

     </style>

     <script>

         ( function(){

             function css( obj, name ){

                 if ( obj.currentStyle ) {

                     return obj.currentStyle[name];

                 }else {

                     return getComputedStyle( obj, false )[name];

                 }

             }

             var ghostwu = {};

             ghostwu.linear = {

                 A : function( option ){

                     return new ghostwu.linear.init( option );

                 }

             };

             ghostwu.linear.init = function( option ){

                 this.opt = {

                     'selector' : '',

                     'css-name' : {},

                     'speed' : 10,

                     'cb' : undefined

                 }

                 for( var key in option ){

                     this.opt[key] = option[key];

                 }

                 this.ele = document.querySelector( this.opt['selector'] );

                 this.bindEvent();

             }

             ghostwu.linear.init.prototype.bindEvent = function() {

                 var _this = this;

                 this.ele.onmouseover = function(){

                     _this.animate( this );

                 };

                 this.ele.onmouseout = function(){

                     _this.animate( this );

                 }

             }

             ghostwu.linear.init.prototype.animate = function(){

                 var cur = 0, _this = this;

                 clearInterval(_this['ele'].timer);

                 _this['ele'].timer = setInterval(function () {

                     var bFlag = true;

                     for (var key in _this.opt['css-name']) {

                         if (key == 'opacity') {

                             cur = css(_this.ele, 'opacity') * 100;

                         } else {

                             cur = parseInt(css(_this.ele, key));

                         }

                         var target = _this.opt['css-name'][key];

                         if (cur != target) {

                             bFlag = false;

                             if (key == 'opacity') {

                                 _this['ele'].style.opacity = ( cur + _this.opt['speed'] ) / 100;

                                 _this['ele'].style.filter = "alpha(opacity:" + (cur + _this.opt['speed']) + ")";

                             } else {

                                 _this['ele'].style[key] = cur + _this.opt['speed'] + "px";

                             }

                         }

                     }

                     if (bFlag) {

                         clearInterval(_this['ele'].timer);

                         _this.opt['cb'] && _this.opt['cb'].call( _this['ele'] );

                     }

                 }, 1000 / 16 );

             }

             window.g = ghostwu;

         } )();

         window.onload = function() {

             g.linear.A({

                 'selector' : '#box',

                 'css-name' : {

                     'width' : 300,

                     'height' : 400

                 }

             });

             g.linear.A({

                 'selector' : '#box2',

                 'css-name' : {

                     'width' : 300,

                     'height' : 400

                 }

             });

         }

     </script>

 </head>

 <body>

     <div id="box"></div>

     <div id="box2"></div>

 </body>

 </html>

鼠标移动到div查看效果:

 
 

[js高手之路]面向对象版本匀速运动框架的更多相关文章

  1. [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算

    到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧. 看看理解原理和理论是否重要?例子从简单到复杂 一.单体(字面量)封装加减乘除 ...

  2. [js高手之路] javascript面向对象写法与应用

    一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...

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

    本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...

  4. [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图

    在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...

  5. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  6. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  7. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  8. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  9. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

随机推荐

  1. YII进行数据增删改查分析

    关于模型部分參考http://blog.csdn.net/buyingfei8888/article/details/40208729 控制器部分: <?php class GoodsContr ...

  2. 【博客目录】SqlServer篇

    SqlServer系列篇   [SqlServer系列]SQLSERVER安装教程     [SqlServer系列]数据库三大范式     [SqlServer系列]表单查询     [SqlSer ...

  3. A 01 如何理解会计中的借和贷

    敲黑板,上结论: 借:钱花到哪里去了? 贷:钱从哪里搞来的? 举个例子 某公司用银行存款200 000元购入一辆自用小汽车(自用小汽车属于固定资产), 会计里面如何计呢? 答案: 借:固定资产200 ...

  4. check the manual that corresponds to your MySQL server version for the right syntax处理方案

    check the manual that corresponds to your MySQL server version for the right syntax:代码出现这样的bug,就要注意你 ...

  5. mybatis if-else(写法)

    mybaits 中没有else要用chose when otherwise 代替 范例一 <!--批量插入用户--> <insert id="insertBusinessU ...

  6. 【java】读取资源文件key->value，java.util.ResourceBundle

    package 国际化; import java.util.ResourceBundle; public class TestResource { public static void main(St ...

  7. HTML基础教程-元素

    HTML 元素 HTML 文档是由 HTML 元素定义的. HTML 元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 注释:开始标签常被称为开放标签 ...

  8. Win10关闭某程序的通知的方法

    一.点击右下角的通知图标. 二.点击所有通知. 三.点击系统 四.点击通知和操作 五.下拉,看到:获取来自这些发送者的通知 六.关闭自己想关闭通知的程序即可.

  9. scalajs_初体验

    scalajs是将scala编译成js的编译器,目的在于使用scala的众多类库和强类型特征构建出稳定可扩展的js应用. build.sbt构建文件如下: enablePlugins(ScalaJSP ...

  10. python基础知识——字符串详解

    大多数人学习的第一门编程语言是C/C++,个人觉得C/C++也许是小白入门的最合适的语言,但是必须承认C/C++确实有的地方难以理解,初学者如果没有正确理解,就可能会在使用指针等变量时候变得越来越困惑 ...