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和ActionScript的交互实现代码
Aug 01 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
小程序实现悬浮搜索框
Jul 12 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
vue+canvas实现移动端手写签名
May 21 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
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
PHP之数组学习
2011/05/29 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
express框架下使用session的方法
2019/07/31 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python返回数组的索引实例
2019/11/28 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
求职简历自我评价范例
2014/03/12 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
罚站检讨书
2015/01/29 职场文书
项目安全员岗位职责
2015/02/15 职场文书
雾霾停课通知
2015/04/24 职场文书
青涩记忆观后感
2015/06/18 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
Python中的程序流程控制语句
2022/02/24 Python