jQuery实现带滑动条的菜单效果代码


Posted in Javascript onAugust 26, 2015

本文实例讲述了jQuery实现带滑动条的菜单效果代码。分享给大家供大家参考。具体如下:

这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码。

运行效果截图如下:

jQuery实现带滑动条的菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>带滑动条的jQuery滑动菜单</title>
<style>
body{ font:12px/1.5 Arial,\5b8b\4f53,sans-serif;background:#fff; color:#333; position:relative}
.header { width:990px; min-width:990px; margin:0 auto; height:68px; position:relative; z-index:200; overflow:hidden}
.headerTab { height:44px; padding:24px 0 0 0; position:relative; width:990px; min-width:990px; margin:0 auto; }
.headerTab a { padding:0 5px; float:left; font-size:14px; color:#333; height:42px; overflow:hidden; line-height:44px;font-family:\5FAE\8F6F\96C5\9ED1,\5B8B\4F53; margin-left:10px; display:inline}
.headerTab a:hover { text-decoration:none; color:#333}
.headerTab .tabLine { position:absolute; top:66px; height:2px; background:#35b0f2; left:0; width:100%; overflow:hidden; font-size:0; line-height:0;}
</style>
</head>
<body>
<div class="headerTab" id="headerTab"><a href="#" title="">三水点靠木</a><a href="#" title="">下载中心</a><a href="#" title="">最新更新</a><a href="#" title="">广告中心</a><a href="#" target="_blank" title="">Delphi源码</a><a href="#" target="_blank" title="">VC++源码</a><a href="#" title="">更新日志</a><i class="tabLine"></i></div>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
var headerTabArray = $("#headerTab a"),headTabLine = $("#headerTab .tabLine"),tabIndex,headerTabArrayLength = headerTabArray.length,headerTabWidthArray = [],headerTabPositonArray = [],defaultNum = 0;
for(var i=0;i<headerTabArrayLength;i++){
  headerTabWidthArray[i] = headerTabArray.eq(i).width() + 10;
  headerTabPositonArray[i] = headerTabArray.eq(i).position().left + 10;  
}
headerTabArray.mouseover(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[tabIndex],left:headerTabPositonArray[tabIndex]},300);
})
headerTabArray.mouseout(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
})
defaultNum = 0;
headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
</script>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JS验证码实现代码
Sep 14 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 #Javascript
javascript中的五种基本数据类型
Aug 26 #Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 #Javascript
简介alert()与console.log()的不同
Aug 26 #Javascript
jQuery左右滚动支持图片放大缩略图图片轮播代码分享
Aug 26 #Javascript
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
python中元类用法实例
2014/10/10 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
模范家庭事迹材料
2014/02/10 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书