mootools_使用MooTools创建Snook风格的导航

最新推荐文章于 2024-09-30 08:51:48 发布

culuo8053

最新推荐文章于 2024-09-30 08:51:48 发布

阅读量101

点赞数

文章标签： css js html jquery css3 ViewUI

原文链接：https://davidwalsh.name/snook-navigation-mootools

版权

mootools

Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools.

乔纳森·斯努克(Jonathan Snook)于去年9月首次发布了精彩的教程，详细介绍了如何使用图片和一些jQuery技术来创建漂亮的鼠标悬停效果。我回顾了他的文章，并将其两个最令人印象深刻的效果移植到了MooTools。

View Demo 观看演示

图片 (The Images)

These are the same images used in Snook's article.

这些是Snook文章中使用的相同图像。

XHTML (The XHTML)


<h2>Example 0: No Script</h2>
<ul id="noscript">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example A: Top down</h2>
<ul id="a">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

<h2>Example B: Right left</h2>
<ul id="b">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
</ul>

Three menus. The first will be a simple CSS-only mouseover, the other two will be varying MooTools versions.

三个菜单。第一个是简单的纯CSS鼠标悬停，其他两个将是不同的MooTools版本。

CSS (The CSS)


ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#fff; text-decoration:none; border-right:1px solid #fff; }
li a { background:url(snook-animation-bg2.jpg) repeat 0 0; }
a:hover, a:focus, a:active { background-position:-150px 0; }
#a a { background:url(snook-animation-bg.jpg) repeat; background-position:-20px 35px; }
#b a { background:url(snook-animation-bg2.jpg) repeat; background-position:0 0; }

Nothing too notable here.

这里没有什么值得注意的。

MooTools JavaScript (The MooTools JavaScript)


window.addEvent('domready', function() {
	/* example a:  top down */
	$$('#a a').each(function(el) {
		//fx
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel'
		});
		
		//css & events
		el.setStyle('background-position','-20px 35px').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-20px 94px');
			},
			'mouseleave': function(e) {
				e.stop();
				fx.start('background-position','-20px 35px');
			}
		});
	});
	
	/* example b:  right left */
	$$('#b a').each(function(el) {
		//css
		var reset = false;
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel',
			onComplete:function() {
				if(reset) {
					el.setStyle('background-position','0 0');
				}
			}
		});
		//events
		el.setStyle('background-position','0 0').addEvents({
			'mouseenter': function(e) {
				e.stop();
				fx.start('background-position','-150px 0');
				reset = false;
			},
			'mouseleave': function(e) {
				reset = true;
				fx.start('background-position','-300px 0');
			}
		});
	});
	
});

When you mouseover the last two navigation menu links, the background image animates from one spot to another creating a flash-like effect.

当您将鼠标悬停在最后两个导航菜单链接上时，背景图像会从一个点动画到另一个点，从而产生类似闪光的效果。

View Demo 观看演示

Credit goes to Snook for this great idea and original execution.

斯诺克(Snook)的出色想法和独创执行功不可没。