jquery
jQuery制作淡入淡出的网站导航栏
前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果.
借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果.
当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了.
XHTML的代码
首先,我们需要在之间把jQuery引用进来,这里我们使用Google CDN提供的jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
首先让我们看看本例子中用做导航栏的背景图片
每个按钮的尺寸都是一样大:125*52px.
接下来我们要看看导航栏的代码,这里我使用ul来进行布局(较常用的方法),代码如下:
<ul class="nav">
<li class="home"><a href="#">主页</a></li>
<li class="work"><a href="#">作品</a></li>
<li class="about"><a href="#">关于</a></li>
<li class="contact"><a href="#">联系</a></li>
</ul>
各位可以看到每个li中还包含了
这样的空div,而这个空div就是本例子中用于鼠标悬停时显示的div.在后面我们可以看到它的作用.继续..
CSS的代码
ul.nav{
height:52px;
text-indent:-9999px;
list-style:none;
}
这里text-indent:-9999px;是把xhtml里的文字缩进到我们看不到的地方.
ul.nav li{
float:left;
position:relative;
}
注意这里position:relative;的设置是为了hoverHome等层进行相对定位做准备.
ul.nav a{
display:block;
width:125px;
height:52px;
}
这里把宽度与高度设置为按钮的尺寸,即125*52px.
.hoverHome,.hoverWork,.hoverAbout,.hoverContact{
position:absolute;
top:0;
left:0;
width:125px;
height:52px;
cursor:pointer;
}
CSS部分的重点就在这,使用position:absolute;后这4个层就会以ul.nav li为基点进行定位,这里我们需要让.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个div与每个li完全重叠,所以我们设置top与left都为0.
接下来我们定义导航栏的背景图片
.home a{
background:url(images/nav.gif) no-repeat 0 0;
}
.work a{
background:url(images/nav.gif) no-repeat -125px 0;
}
.about a{
background:url(images/nav.gif) no-repeat -250px 0;
}
.contact a{
background:url(images/nav.gif) no-repeat -375px 0;
}
我们会特别注意到背景图片的偏移位置.例如“home”的背景图片在距离左边0px,距离上边0. 而第2个按钮”work”距离左边125px,所以我们设置为-125px(记住是负号).距离上边为0;以此类推.
.hoverHome{
background:url(images/nav.gif) no-repeat 0 -52px;
}
.hoverWork{
background:url(images/nav.gif) no-repeat -125px -52px;
}
.hoverAbout{
background:url(images/nav.gif) no-repeat -250px -52px;
}
.hoverContact{
background:url(images/nav.gif) no-repeat -375px -52px;
}
这里我们依然用的是同一张背景图片,而我们这一次需要的是图片下方蓝色的部分,也就是距离上边52px的线以下的部分.所以我们看到每个层的背景图偏移位置第2个属性都是-52px,这就让背景图从距上边52px的地方开始.
现在刷新你的页面,如果你的代码没错,你应该可以看到一条蓝色的导航栏了.但是它没有任何鼠标悬停的变动效果.没有淡入淡出,轮到jQuery出场了.
jQuery代码
请依然把代码写在<head>里面.
<script type="text/javascript">
$(document).ready(function(){
$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").css("opacity","0");
$(".hoverHome,.hoverWork,.hoverAbout,.hoverContact").hover(function () {
$(this).stop().animate({
opacity: 1
}, "slow");
},
function () {
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
</script>这段代码很容易理解,首先把.hoverHome,.hoverWork,.hoverAbout,.hoverContact这4个层设置透明度opacity为0,即隐藏.接着当鼠标悬停在按钮上时,我们再将这4个层以淡入的效果显示出来,而当把鼠标移开时,这4个层就淡出.
总结一下
这个例子中的代码都很好理解,其核心就是利用jQuery中的animate()函数以淡入淡出的效果改变div的css属性.参考jQuery API关于animate的使用方法.而CSS最需要留意的就是position:relative与Position:absolute的位置.
好吧,对于jQuery与Javascript这方面我也是一个小小的菜鸟,经常都是看看别人的代码然后自己胡乱写,所以如果你有更好的方法,请你留言给我,同时也帮助其他看到这篇文章的朋友呵呵.谢谢
最后呼吁一下转载的朋友,请尊重本人的劳动成果,留一个小小的链接给我.谢谢！
people also love:
Loading ...
对于图片类的导航是不错的，如果是图片加文字似乎那一层渐隐的就覆盖文字了。T_T
你说的没错,提了我一个醒.不过如果是用文字来做的导航.用背景颜色的渐变应该比较常见.就像css-tricks.com那个效果一样
呵呵，这样会多了个空层，这种方法我个人感觉还不是很好。
呵呵我比较不在乎检验的东西啦
以后慢慢找找看有其他方法没
呵呵。. 是个很不错的技巧.
不错不错，正想改改导航栏
这似乎不是一个很好的方法
赞一个
不过，没看到 li 里的div 呀，demo OK
[...] jQuery制作淡入淡出的网站导航栏 | eddie.Yang's creative http://www.ediyang.com/jquery-fade-in-and-out-menu – view page – cached 前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果. 借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果. 当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了. , 前些天有朋友问我关于如何用jQuery制作淡入淡出的效果,就像本网上方的导航栏一样的效果. 借助jQuery的帮助,我们只需要几行代码就可以实现这样的效果. 当然这样的效果不止可以用来制作网站导航栏,同时也可以用来用在其他有鼠标悬停的地方.这就需要发挥各位的想象力了. — From the page [...]
很不错！刚接触jQuery！受益了！
我也是没看到里面的空白div呢…
既然进来了，就留个脚印
好文！
今天是圣诞节啊，祝大家节日快乐。呵呵
很不错啊，之前有个同学一直跟我说JQ多神奇，可惜我不懂这些，继续努力吧
博主你好，我用了你的这个技术，但是发现没法添加链接给图片，或者说添加后点击无效，不知是怎么回事，我修改了你的代码发现也是链接无效的样子，能不能告诉下怎么弄？
明白了…把中的加到后面就好了
聪明！