jQuery实现背景滑动菜单

话不多说,直接附上源码,仅供大家参考

<div class="menu">
 <ul id="menu">
 <li><a href="#">JavaScript</a></li>
 <li value="1"><a href="#">Graphic Design</a></li>
 <li><a href="#">HTML</a></li>
 <li><a href="#">User Interface</a></li>
 <li><a href="#">CSS</a></li>
 </ul>
 <div id="slide"></div>
</div>
* {margin:0; padding:0}
body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}
.menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px}
.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}
.menu li {float:left}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px}
#slide {position:absolute; top:6px; height:24px; background:#89957a; z-index:10;}
(function($){
 $.fn.extend({
 bgslide:function(value){
 //可选参数
 value=$.extend({
 "fw":12,
 "sw":2,
 "ftime":100,
 "stime":300
 },value);
 //初始化背景的位置
 var liw = $("ul li:eq(0)",value.menu).width();//获取第一个li的宽
 var $slide = $(this).children("div");
 $slide.css({"width":liw,"left":"5"});
 //悬停时执行动画
 function hani(w,l){
 $slide.stop(true) //很关键的一句话,当悬停时,让正在执行的动画,和列队中的动画,都取消;防止鼠标不停滑动时的bug;
 .animate({"width":w,"left":l+value.fw},value.ftime)
 .animate({"left":l-value.fw},value.stime)
 .animate({"left":l+value.sw},value.stime)
 .animate({"left":l-value.sw},value.stime);
 }
 //离开时执行动画
 function oani(){
 $slide.stop(true)
 .animate({"width":liw,"left":"5"},value.ftime)
 .animate({"left":l-value.fw},value.stime)
 .animate({"left":l+value.sw},value.stime)
 .animate({"left":l-value.sw},value.stime);;
 }
 $("ul li",this).hover(function(){
 var w = $(this).width(); //获取当前li的宽
 var l = $(this).position().left; //获取当前li的横坐标
 if(!$(this).index()==0){ //鼠标悬停在第一个LI时,不发生动画
 hani(w,l);
 }
 },function(){
 oani();
 });
 }
 })
})(jQuery);

html结构思路:

  div:放置一个背景图层,相对定位;

  UL:放置菜单内容,绝对定位;

  div:放置滑动的背景层,绝对定位;

JQuery思路分析:

  鼠标悬停到每一个LI的时候,让这个滑动的背景层,通过水平移动动画,来定位到当前这个LI的地方;并有一个左右晃动效果;鼠标离开时,让背景层滑动到初始位置;

鼠标悬停时:

  1.获取当前LI相对于最外层DIV的水平坐标,即横坐标值;

  2.让滑动的背景层的横坐标正好等于当前LI的横坐标;

  3.执行一个左右晃动的动画,即改变当前水平坐标的值;

鼠标离开时:

  1.让背景层滑动到初始位置,即改变横坐标的值,为初始值;

下载Demo地址:http://xiazai.jb51.net/yuanma/myslidebgmenu(jb51.net).rar

以上就是本文的全部内容,希望对大家有所帮助,谢谢对我们的支持!

(0)

相关推荐

  • jQuery实现可用于博客的动态滑动菜单完整实例

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

  • jquery实现最简单的滑动菜单效果代码

    本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/

  • jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • jquery实现左右滑动菜单效果代码

    本文实例讲述了jquery实现左右滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果.当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-menu-codes/ 具

  • 利用JQuery动画制作滑动菜单项效果实现步骤及代码

    效果: 点击第二个菜单项后出现一个向上滑动的动画,控制margin-top底部另一个div中的文字 上移从而替换掉原有的文字. 原理其实不难无非就是css的控制加之jquery的代码 对docemnt中所有li绑定一个hover事件,事件中根据鼠标的状态(无非是移入与移除), 使用animate的动画方式使原有的div向上移70px,移出时再将页面效果变回原有的样子. 代码如下: 复制代码 代码如下: $(function () { var webNav = { val: { target: 0

  • jQuery实现可用于博客的动态滑动菜单

    本文实例讲述了jQuery实现可用于博客的动态滑动菜单的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jQuery实现背景滑动菜单

    话不多说,直接附上源码,仅供大家参考 <div class="menu"> <ul id="menu"> <li><a href="#">JavaScript</a></li> <li value="1"><a href="#">Graphic Design</a></li> <li

  • jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果

    本文实例讲述了jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果.分享给大家供大家参考.具体如下: 这是一款jquery菜单特效,点击后高亮背景,个性的菜单特效.网上见到比较多的菜单了,不过像这样这么简单的方法来实现却不多见,本菜单整体简洁,点击导航栏上的任意菜单项后,该菜单项的背景变成黑色,并且鼠标移走后,仍然固定保持黑色,记住了菜单的位置. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-menu-set-focus-

  • jQuery实现带滑动条的菜单效果代码

    本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE

随机推荐