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 私有成员分析
Jan 13 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
javascript表单验证大全
Aug 12 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 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的一个简单加密解密代码
2014/01/14 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP7新功能总结
2019/04/14 PHP
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
jQuery自定义多选下拉框效果
2017/06/19 jQuery
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
详解Python中的动态属性和特性
2018/04/07 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
利用Python检测URL状态
2019/07/31 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python pip 常用命令汇总
2020/10/19 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
入党自我鉴定范文
2013/10/04 职场文书
讲座主持词
2014/03/20 职场文书
教师自我鉴定范文
2014/03/20 职场文书
新学期开学演讲稿
2014/05/24 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang