鼠标悬停上按钮后菜单竖向滑动显示,亮点可以查看演示里面的滑出中含有主菜单和菜单图示两种元素的不同步滑出…好像是这样说吧.

其实看看演示就知道了:

[预览地址][下载地址][教程地址]

这个网站上面也有一些别的不错的jQuery效果教程.

这是一个代码结构简单（只支持一级）的jQuery滑动下拉菜单，更容易对菜单进行自定义修改。

作品来自于漂亮的coda.co.za，适用于那些内容分类不太复杂的网站使用。

可以先来看看最终的效果演示页面 – Demo 和下载地址在这里 – Download

也许fixed的固定背景已经不足以吸引你的注意力了,那么一个动画背景如何? 用jQuery就可以打造出横向滑动的网页背景图片.

今天先介绍一个简单的,先来看看最终效果吧 – Demo

喜欢这种非常酷的网页效果吗? 你可以下载研究一下 - Download (网盘)

还有更详细的制作过程你可以在作者的网站上面浏览学习 –  Animated background

之前已经有了模仿apple边栏手风琴的导航菜单效果。

这次带来的是模仿apple滑动展示板块的效果，原版的在iphone的主页，与原版不同的是，iphone用的渐隐方式，这里用的滑动模式。以CSS和jQuery实现效果。

效果预览&下载地址&教程地址

和lavalamp的效果有些相似,只是这款移动后不会进行二次晃动,显得目标更坚定明确.⊙﹏⊙

[预览效果] [下载地址]

这是一个基于jquery简洁,简单的图片幻灯片效果,当鼠标悬停在图像上时,会滑动隐藏显示出文字说明.

适合用来制作相关文章列表或是gallery网站效果。

[ 预览效果 ] [ 下载地址 ] [ 作品地址 ]

这是一款简单的Jquery滑动菜单,很适合横向导航的使用.

首先是html中一个简单的菜单结构,以图片和文字相结合的形式展现.

[sourcecode language='html']

• 
  
  Change your password
  
• 
  
  Suscribe to our RSS!
  
• 
  
  Choose your options!
  

[/sourcecode]

接下来是css样式
[sourcecode language='css']
#iconbar li {
float:left;
position:relative;
overflow: hidden;
margin-right:20px;
background:#E8E8F9;
border: 1px dashed #ffc0ff;
}
#iconbar a {
text-decoration: none;
outline: none;
color:#d00000;
display: block;
width: 24px;
padding: 10px;
cursor:pointer;
}
#iconbar span {
width: 100px;
height: 35px;
position: absolute;
display: none;
line-height:110%;
color:#409BED;
padding-left: 10px;
}
[/sourcecode]

嗯…

最后再加上Script脚本就完成了整个菜单的组成.
[sourcecode language='php']
jQuery.preloadImages = function()
{
for(var i = 0; i
jQuery(““).attr(“src”, arguments[i]);
}
jQuery.preloadImages(“key.gif”, “keyo.gif”, “rss.gif”, “rsso.gif”, “sel.gif”, “selo.gif”);
[/sourcecode]

[sourcecode language='php']
jQuery(document).ready(function(){

$(“#iconbar li a”).hover(
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“.gif”)[0];
$(this).children(“img”).attr({src: “” + origen + “o.gif”});
$(this).animate({ width: “140px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “show”}, “fast”);
},
function(){
var iconName = $(this).children(“img”).attr(“src”);
var origen = iconName.split(“o.”)[0];
$(this).children(“img”).attr({src: “” + origen + “.gif”});
$(this).animate({ width: “24px” }, {queue:false, duration:”normal”} );
$(this).children(“span”).animate({opacity: “hide”}, “fast”);
});
});
[/sourcecode]

整个代码就包含了以上几个方阵 你可以在这个链接[ ilovecolors.com.ar ]预览效果

或者直接下载整个源码进行修改使用。

[ ilovecolors]