08.0711 entry 用jQuery实现导航的rollover和主题切换

最近严重的沉迷银魂，其他的事情都是一拖再拖...想想也差不多该冷却一下咯，只等连载就OK了。

唠叨以后是这篇的主题，效果就不描述了，预览在这里。因为是用jQuery实现的，所以代码都比较简单。

导航rollover效果

主要是用了jQuery的animate，具体文档可以看这里

$('#navigation li').each(function() {
	if(this.className.indexOf("current_page_item")==-1) { //判断是否指向当前页面
		$("a",this).animate({left: -80}, "fast");
		$(this).hover(function(){
			$("a",this).animate({left: 0}, "fast");
		},function(){
			$("a",this).animate({left: -80}, "fast");
		});
	}
});

主题样式切换

function switchStylestyle(styleName)
{
	$('link[@rel*=style][@title]').each(function(i) 
	{
		this.disabled = true;
		if (this.getAttribute('title') == styleName) this.disabled = false;
	});
}

具体可以下载回去看看。

Tagged: and | 5 Comments

Related Posts

5 Responses to 用jQuery实现导航的rollover和主题切换

Feed for this Entry

  1. 谢谢您的赐教～ :)
    这个效果真的很炫～
    回去好好研究一下

    gravatar 忧游客 at 2007-08-12 15:47:27

  2. 很不错的效果

    gravatar Bill.sun at 2007-08-13 22:43:13

  3. 博客上面这个开关灯的效果就是COool～呵呵
    非常喜欢～

    gravatar 弥缝 at 2007-09-06 20:08:37

  4. 这个开关确实很有意思.
    最近也关心起jquery来了,相当不错的一个框架.
    1.2已经放出了,不知fireyy有什么经典示例不.

    gravatar iHao at 2007-09-12 01:13:14

  5. Realazy的一篇教程非常不错
    http://realazy.org/blog/2006/08/31/small-jquery-tutorial/

    gravatar fireyy at 2007-09-12 15:54:46

Leave a Reply

Mail will not be published