[英]Use mootools Fx to zoom background-size
I'm trying to use mooTools Fx to zoom the background image of a div. 我正在尝试使用mooTools Fx来缩放div的背景图像。 I followed david welshs article To make custom transformations. 我跟着大卫威尔士文章进行自定义转换。 My mooTools/js skills are just quite basic, so 我的mooTools / js技能非常基础,所以
Also I am wondering if there is a possibility to incorporate to use a sine transitions for example (though it doesn't look like). 另外我想知道是否有可能合并使用正弦转换(例如它看起来不像)。
Here's what I tried: http://jsfiddle.net/q2GQ7/ 这是我尝试过的: http : //jsfiddle.net/q2GQ7/
Javascript: 使用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();}
});
});
Since this looked like fun, I wrote some code in the MooTools way[tm] to get you started. 因为这看起来很有趣,所以我用MooTools的方式编写了一些代码[tm]来帮助你入门。 I don't normally do this as it's contrary to SO style but I miss working with MooTools. 我通常不这样做,因为它与SO风格相反,但我想念MooTools。 so meh... 所以......
http://jsfiddle.net/dimitar/dNd3H/ 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));
options
object, therefore it will be possible to use unit
etc in the set. 可以访问普通options
对象,因此可以在集合中使用unit
等。 scope will be correctly bound to Fx
instance, NOT the element like in David's demo. 范围将正确绑定到Fx
实例,而不是David的演示中的元素。 Look at Fx.Tween.js source. 查看Fx.Tween.js源代码。 Normally your classes extend Fx.Tween, this fix is kind of an anti-pattern / hack, Fx instantiation direct is not common at all :) You really should just extend the
Fx.CSS.Parser
andElement.Styles
properties instead to be able to read / parse what you need and Fx will just work like with any other property. 通常你的类扩展Fx.Tween,这个修复是一种反模式/黑客,Fx实例化直接根本不常见:)你真的应该只扩展Fx.CSS.Parser
和Element.Styles
属性而不是阅读/解析你需要什么,而Fx将像任何其他财产一样工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.