Element.appearOn()一个更加强大的fade(),扩展MooTools Element

By Rainbow on // JavaScript // 2560 Views+ // (0) Comments

前一段时间我在《在MooTools中实现 jQuery’s hover() 方法》的文章中，用到过MooTools 的 fade()方法(即淡入淡出特效)，我们模仿了jQuery’s hover() 方法。

而今天我所介绍的例子，还是基于MooTools 的
fade()的扩展，他就是Element.appearOn()。

有了这个扩展的方法，我们就可以方便的展示元素由隐藏到显示的渐变效果和由暗淡到清晰的效果，一旦用户进入或离开其他元素的元素。

此例子，可以应用于类似于快捷方式的按钮。

The MooTools Javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*通过扩展MooTools Element 实现 appearOn()*/
Element.implement({	
	appearOn: function(el, opacity, options){
		opacity = $type(opacity) == 'array' ? [opacity[0] || 1, opacity[1] || 0] : [opacity || 1, 0];
 
		this.set({
			opacity: opacity[1],
			tween: options || {duration: 200}
		});
 
		$(el).addEvents({
			mouseenter: this.fade.bind(this, opacity[0]),
			mouseleave: this.fade.bind(this, opacity[1])
		});
 
		return this;
	}	
});

The Usage : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*appearOn()的用法*/
window.addEvent('domready', function(){
 
	// First example
	var box = $('box1');
	box.getElement('h2 span.controls').appearOn(box);
 
	// Second example
	var box = $('box2');
	box.getElement('h2 span.controls').appearOn(box, [0.9, 0.3]);
 
	// Third example
	var img = $('box3').getElement('img');
 
	img.appearOn(img, [1, 0.3], {
		duration: 1000
	});
});

 

The CSS :

1
2

.box { margin: 30px 0; }
.delete, .delete:hover { color: #800; }

The HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <div id="box1" class="box">
        <h2>
            Example 1: This is a great title! 
            <span style="visibility: hidden; opacity: 0;" class="controls"><a href="#">Edit</a> <a href="#" class="delete">Delete</a></span>
        </h2>
 
	</div>
	<div id="box2" class="box">
		<h2>
            Example 2: I can always see my controls! 
            <span style="visibility: visible; opacity: 0.3;" class="controls"><a href="#">Edit</a> <a href="#" class="delete">Delete</a></span>
        </h2>
	</div>
 
	<div id="box3" class="box">
		<h2>Example 3: me.appearOn(myself)</h2>
		<img style="visibility: visible; opacity: 0.3;" src="http://blog.moocss.com/wp-content/themes/rainbow/images/RainBow.png" alt="">
	</div>

演示：http://blog.moocss.com/Mootools/demo9/appearOn.htm

分享到： 更多

文章评论 已经有 0 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计