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 相关文章推荐
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
js实现点击烟花特效
Oct 14 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
实用函数7
2007/11/08 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
php实现mysql封装类示例
2014/05/07 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python简单读取大文件的方法
2016/07/01 Python
python小白切忌乱用表达式
2020/05/29 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
应届护士推荐信
2013/11/16 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
学校个人对照检查材料
2014/08/26 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
离婚协议书格式
2014/11/21 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
祝寿主持词
2015/07/02 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Nginx反向代理学习实例教程
2021/10/24 Servers
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技