使用jQuery background-position插件来创建超酷的导航条效果
原文篇幅较长完整代码及内容请见原文:http://www.gbtags.com/gb/share/5864.htm
在过去的web开发和设计中,大家往往使用flash来创建炫酷的菜单效果,随着js和web技术的发展,现在大家可以使用简单的javascript代码生成同样漂亮的菜单效果,在今天的这个简单教程中,我们将带领大家使用jQuery的background-position插件来开发漂亮的导航条效果,希望大家喜欢!
相关插件:
- jQuery background-position
主要思路
在这个特效中,我们使用jQuery的background-position插件来动画背景的位置来达到背景变化的特效。你可以使用正负的背景图片坐标位置来定义动画的过程,注意这里你需要自己创建一个合适的背景图片来加强这种动画效果。这里我们使用如下几张图片:
原文图片是透明的..然后加上背景是白色的.所以就看不出了,为使文章方便阅读,删除了图片。
当我们动态的移动背景图片位置的时候,可以产生波浪或者淡入淡出,或者倾斜移动效果。
HTML代码
html代码很简单,用ul生成导航菜单的框架,如下:
- <ul id="nav1">
- <li><a href="#">Home</a></li>
- <li><a href="#">Portofolio</a></li>
- <li><a href="#">Customer</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <br /><br />
- <ul id="nav2">
- <li><a href="#">Home</a></li>
- <li><a href="#">Portofolio</a></li>
- <li><a href="#">Customer</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <br /><br />
- <ul id="nav3">
- <li><a href="#">Home</a></li>
- <li><a href="#">Portofolio</a></li>
- <li><a href="#">Customer</a></li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
这里我们生成3个导航菜单,分别使用不同的jQuery动画菜单效果。
CSS代码
css代码定义了每个菜单<a>标签的背景图片,如下:
- #nav1 li a {
- display:block;
- padding: 0px 80px;
- height:100%;
- color:#AAA;
- text-decoration:none;
- text-shadow: 2px 2px 2px #707070;
- font-weight: bold;
- border-left: 5px solid #707070;
- background:url(../images/light.png) repeat 0 0;
- }
- #nav2 li a {
- display:block;
- padding: 0px 80px;
- height:100%;
- color:#AAA;
- text-decoration:none;
- text-shadow: 2px 2px 2px #707070;
- font-weight: bold;
- border-left: 5px solid #707070;
- background:url(../images/light2.png) repeat 0 0;
- }
- #nav3 li a {
- display:block;
- padding: 0px 80px;
- height:100%;
- color:#AAA;
- text-decoration:none;
- text-shadow: 2px 2px 2px #707070;
- font-weight: bold;
- border-left: 5px solid #707070;
- background:url(../images/light3.png) repeat 0 0;
- }
Javascript代码
在js代码中,我们调用简单的js就可以动态的控制背景图片位置,如下:
在以上代码中,我们控制鼠标移入链接和移出链接的操作,这个时候,background-position插件会帮助我们生成正确的动画效果。
具体效果,请查看在线演示,希望大家喜欢这个特效,只要你有足够好的想象力,你可以开发出变化无穷的菜单特效,如果你有任何建议和问题,请给我们留言,谢谢!
原文篇幅较长完整代码及内容请见原文:http://www.gbtags.com/gb/share/5864.htm