MooTools1.4源码分析- Fx.Tween

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 00:08 点击:

 Mootools1.4 - Fx.Tween类的源码分析,如果理解有误欢迎指正:
 
/*
---
 
name: Fx.Tween
 
description: Formerly Fx.Style, effect to transition any CSS property for an element.
 
license: MIT-style license.
 
requires: Fx.CSS
 
provides: [Fx.Tween, Element.fade, Element.highlight]
 
源码分析: 苦苦的苦瓜(http://hmking.blog.51cto.com)
 
...
*/
 
// #region - Fx.Tween -
 
/**
* @Fx.Tween: 对元素单个样式属性执行一个特效
**/
Fx.Tween = new Class({
 
    // 继承自Fx.CSS
    Extends: Fx.CSS,
 
    /**
    * @method: initialize
    * @param element - (mixed) 元素的id或引用
    * @param options - (object, 可选) 类可用的所有可选项, 以及如下的可选项:
    *       property - (string, 默认为null) 变换的目标CSS属性,例如:'width', 'color', 'font-size', 'border'等. 
    *                               如果在此省略该可选项, 则在执行start或set方法时,需要在方法的第一个参数上指定一个CSS属性.
    * @description: 构造函数,提供将元素的一个CSS属性值从一个值向另一个值进行转化的功能
    * @notes:
    *       任何可以用Element:setStyle设置的CSS属性都可以用于Fx.Tween
    *       如果不是可计算型的CSS属性, 如border-style 或 background-image等, 则只是简单的设置它的值
    *       如果使用了property可选项, 则在调用start和set方法时就不用再指定CSS属性
    **/
    initialize: function (element, options) {
        // element属性存储特效所作用的元素对象
        this.element = this.subject = document.id(element);
        // 调用父类的同名方法
        this.parent(options);
    },
 
    /**
    * @method: set
    * @param property - (string) css属性(如果在构造函数中设置了property可选项, 则该处可以省略)
    * @param now - (mixed) css属性值
    * @description: 将元素的指定CSS属性值立即设置为指定的值
    * @returns: (object) 主调Fx.Tween实例
    * @notes:
    *       如果使用了property可选项, 或者在start方法中指定了CSS属性参数,则在调用set方法时就不用指定CSS属性参数
    **/
    set: function (property, now) {
        // 如果只提供一个参数
        if (arguments.length == 1) {
            // 将此参数作为目标值
            now = property;
            // 取CSS属性,首先取Fx实例的property属性存储的CSS属性名
            property = this.property || this.options.property;
        }
        // 最终渲染效果
        this.render(this.element, property, now, this.options.unit);
    

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1