Element.highlight扩展方法,基于MooTools

Element Highlight 是一个强调或突出元素的一个动画效果插件,默认情况下所有的同类元素都是不透明的,当我们的鼠标移动到某一个元素上时,就会与其它剩下的元素有区别,就会突出显示。

MooTools Element Highlight

View Demo »

  

Download Files »

此实例用到了MooTools More 中的一个插件是Element.Delegation

Element.Delegation

Delegates events for child elements to their parents for greater efficiency。

MooTools 的 Element.Delegation 类似于 jQuery1.3 中live()方法,后来在jQuery1.4中也引入了Delegate,Delegate补救了live的很多不足,他将事件直接绑定到了context,而不是document。不过MooTools 的 Element.Delegates 更好用!

哎,不多说了,要想使用MooTools 的Element.highlight扩展方法,必须得用 MooTools More 中的 Element.Delegation插件。

The MooTools JavaScript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
---
description: Sets full opacity to element that is moused over while dimming all other elements of same class.
license: MIT-style
authors: [Michael Russell]
provides: [Element.highlight]
requires: 
  core/1.2.4: [Element, Fx.Tween]
  more/1.2.4.4: [Element.Delegation]
...
*/
 
Element.implement({
 
	highlight: function( linkClass, opacity ) {
 
		opacity = ( opacity ) ? opacity : .3;
		linkClass = ( linkClass.charAt( 0 ) == '.' ) ? linkClass : '.' + linkClass;
 
		this.addEvent( 'mouseover:relay('+ linkClass +')', function( e, elem ) {
 
			$$( linkClass ).each( function( link ) {
 
				if( elem != link ) {
 
					link.tween( 'opacity', opacity );
				}
			});
		});
 
		this.addEvent( 'mouseout:relay('+ linkClass +')', function( e, elem ) {
 
			$$( linkClass ).each( function( link ) {
 
				link.tween( 'opacity', 1 );
			});
		});
	}
});

View Demo »

  

Download Files »

站点统计