jQuery实现背景滑动菜单


Posted in Javascript onDecember 02, 2016

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

<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.3water.com/yuanma/myslidebgmenu(3water.com).rar

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
JS图片预加载插件详解
Jun 21 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 #Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
基于jQuery实现的幻灯图片切换
Dec 02 #Javascript
JavaScript中清空数组的方法总结
Dec 02 #Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 #Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 #Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 #Javascript
You might like
解析php中如何直接执行SHELL
2013/06/28 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python进阶教程之异常处理
2014/08/30 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python程序变成软件的实操方法
2019/06/24 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
北大青鸟学生求职信
2013/09/24 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
党员党性分析材料
2014/02/17 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
客户经理岗位职责
2015/01/31 职场文书
员工考勤管理制度
2015/08/06 职场文书
文艺委员竞选稿
2015/11/19 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
Java Socket实现多人聊天系统
2021/07/15 Java/Android