Mootools 1.2: Làm mờ link khi hover

Đăng bởi Neo trong mục Hướng dẫn vào 26 tháng 6, 2009 | Comments

Chúng ta có thể dễ dàng set màu nào đó khi hover vào link với CSS, nhưng tại sao không thử tạo thêm 1 chút hiệu ứng?

window.addEvent('domready',function() {
	$each($$('.fade'), function(el) {
		var original = el.getStyle('color');
		var morph = new Fx.Morph(el,{ 'duration':'400', link:'cancel' });
		el.addEvents({
			'mouseenter' : function() { morph.start({ 'color': '#00cc00' }) },
			'mouseleave' : function() { morph.start({ 'color': original }) }
		});
	});
});

Với đoạn code trên, tất cả link có class là "fade" sẽ được thêm vào hiệu ứng Fx.Morph khi bạn di chuột vào hoặc dời đi

Bạn có thể thay đổi thời gian thay đổi màu ở dòng 4: 'duration':'400'
Và thay đổi màu ở dòng 6:
'color': '#00cc00'

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter