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;
});
}

具体可以下载回去看看。

Related Posts

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

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

  2. 很不错的效果

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

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

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

Leave a Reply

Mail will not be published