javascript-使用mootools Fx缩放背景大小

2019-10-30 06:35:05 阅读：286 来源： 互联网

我正在尝试使用mooTools Fx缩放div的背景图像.我遵循了david welshs article进行自定义转换.我的mooTools / js技能非常基础,所以

我也想知道是否有可能合并使用例如正弦转换(尽管看起来不像).

Javascript：

$$('#program a').each(function(item, index){
    item.store('BackgroundZoomer', new Fx({ duration: 250}));
});
$$('#program a').each(function(item, index){
    item.retrieve('BackgroundZoomer').set = function(value) {
    var style = 200+value + "px " +200+value + "px";
    this.setStyle('background-size', style);
    };
});
$$('#program a').each(function(item, index){
    addEvents({
      'mouseenter': function(){   
            item.retrieve('BackgroundZoomer').start(0, 200); },
        'mouseleave': function(){
            item.retrieve('BackgroundZoomer').cancel();}
    });
});

解决方法:

由于这看起来很有趣,所以我以MooTools的方式[tm]编写了一些代码来入门.我通常不这样做,因为这与SO风格相反,但我想念使用MooTools的情况.嗯…

http://jsfiddle.net/dimitar/dNd3H/

(function(){
    'use strict';

    var Fx = this.Fx;

    // keep the set override private
    Fx.Background = new Class({
        Extends: Fx,
        initialize: function(element, options){
            this.element = element;
            this.parent(options);
        },
        set: function(value, u){
            u = this.options.unit;
            this.element.setStyle('background-size', [value, u, ' ', value, u].join(''));
            return this;
        }
    });

    document.getElements('#program a').each(function(item) {
        item.store('fxb', new Fx.Background(item, {
            duration: 250,
            link: 'cancel',
            unit: '%' // change to px or em 
        }));
    });

    document.id('program').addEvents({
        'mouseover:relay(a)': function(){
            // 100% to 200%
            this.retrieve('fxb').start(100,200);
        },
        'mouseout:relay(a)': function(){
            // 200% back to 100%
            this.retrieve('fxb').start(200,100);
        }
    });
}.call(this));

说明：

>关闭.好的做法.
>创建一个扩展Fx但需要一个新参数的元素的子类-类似于Fx.Morph和Fx.Tween的工作方式.好处是：可以通过Fx对象在任何地方使用.可以访问普通选项对象,因此可以在集合中使用单位等.范围将正确绑定到Fx实例,而不是像David的演示中那样的元素.
>实例化元素的新类

Look at Fx.Tween.js source. Normally your classes extend Fx.Tween, this fix is kind of an anti-pattern / hack, Fx instantiation direct is not common at all

标签：mootools,css3,css,javascript
来源： https://codeday.me/bug/20191030/1966081.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用mootools Fx缩放背景大小