MooTools1.4源码分析- Fx.Morph

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 05:51 点击:

 Mootools1.4 - Fx.Morph类的源码分析,如果理解有误欢迎指正:
 
/*
---
 
name: Fx.Morph
 
description: Formerly Fx.Styles, effect to transition any number of CSS properties for an element using an object of rules, or CSS based selector rules.
 
license: MIT-style license.
 
requires: Fx.CSS
 
provides: Fx.Morph
 
源码分析: 苦苦的苦瓜(http://hmking.blog.51cto.com)
 
...
*/
 
// #region - Fx.Morph -
 
/**
* @Fx.Morph: 提供一次对多个CSS属性进行动画特效变换的功能,所以本类的属性为多值集合
**/
Fx.Morph = new Class({
 
    // 继承自Fx.CSS
    Extends: Fx.CSS,
 
    /**
    * @method: initialize
    * @param element - (mixed) 元素的id或引用
    * @param options - options - (object, 可选) Fx类中提供的可选项
    * @description: 构造函数,提供将多个元素的CSS属性值从一个值向另一个值进行转化的功能
    **/
    initialize: function (element, options) {
        // element属性存储特效所作用的元素对象
        this.element = this.subject = document.id(element);
        // 调用父类的同名方法
        this.parent(options);
    },
 
    /**
    * @method: set
    * @param now - (mixed) 可以是包含CSS属性键值对的对象, 或是一个CSS选择器(必须在页面中已定义).如果对CSS属性只给出一个值,则变换的时候将把元素当前的属性值作为起始值.
    *       {
    *           'height': 200,
    *           'width': 200,
    *           'background-color': '#f00',
    *           'opacity': 0
    *       }
    * @returns: (object) 主调Fx.Morph实例
    * @description: 将元素的指定CSS属性值立即设为指定值
    **/
    set: function (now) {
        // 如果参数是字符串类型,表示为CSS选择符,从当页页面的样式规则中查找指定的规则
        if (typeof now == 'string') {
            now = this.search(now);
        }
        // 分别设置每一项样式值
        for (var p in now) {
            this.render(this.element, p, now[p], this.options.unit);
        }
        return this;
    },
 
    /**
    * @method: compute
    * @param from - (object) 解释过的各项样式属性的起始值的对象
    * @param to - (object) 解释过的各项样式属性的结束值的对象
    * @param delta - (mixed) 特效变化所需要的比例因子
    * @returns: (array) 包含计算过的各项样式属性当前值信息的一个数组
    * @description: 根据各项样式属性初始值,结束值和特效比例因子计算各项样式属性的当前值
 &n

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

    推荐热点

    • 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