话不多说,直接附上源码,仅供大家参考
html结构思路:
div:放置一个背景图层,相对定位;
UL:放置菜单内容,绝对定位;
div:放置滑动的背景层,绝对定位;
JQuery思路分析:
鼠标悬停到每一个LI的时候,让这个滑动的背景层,通过水平移动动画,来定位到当前这个LI的地方;并有一个左右晃动效果;鼠标离开时,让背景层滑动到初始位置;
鼠标悬停时:
1.获取当前LI相对于最外层DIV的水平坐标,即横坐标值;
2.让滑动的背景层的横坐标正好等于当前LI的横坐标;
3.执行一个左右晃动的动画,即改变当前水平坐标的值;
鼠标离开时:
1.让背景层滑动到初始位置,即改变横坐标的值,为初始值;