jQuery实现Tab菜单滚动切换的方法


Posted in Javascript onSeptember 21, 2015

本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下:

这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.

运行效果截图如下:

jQuery实现Tab菜单滚动切换的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery 让你的Tab菜单滚动的代码</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<style>
 body {
  font-family:arial;
  font-size:12px; 
 }
 a {
  color:#333;
  text-decoration:none;
  display:block;
 }
 a:hover {
  color:#888;
  text-decoration:none;
 }
 #moving_tab {
  overflow:hidden;
  width:300px;
  position:relative
  border:1px solid #ccc; 
  margin:0 auto;
 }
  #moving_tab .tabs {
   position:relative; 
   height:30px;
   padding-top:5px;
   cursor:default;
  }
  #moving_tab .tabs .item {
   position:relative;
   z-index:10;
   float:left;
   display:block;
   width:150px;
   text-align:center;
   font-size:14px;
   font-weight:700; 
  }
  #moving_tab .tabs .lava {
   position:absolute;
   top:0; left:0;
   z-index:0;  
   width:150px;
   height:30px;
   background:#abe3eb;
  }
  #moving_tab .content {
   position:relative;
   overflow:hidden;
   background:#abe3eb;
   border-top:1px solid #d9fafa;
  }
  #moving_tab .panel {
   position:relative;
   width:600px;
  }
  #moving_tab .panel ul {
   float:left;
   width:300px;
   padding:0;
   margin:0;
   list-style:none;
  }
   #moving_tab .panel ul li {
    padding:5px 0 5px 10px; 
    border-bottom:1px dotted #fff;
   }
 </style>
 <script>
 $(document).ready(function () {
  $('.lava').css({left:$('span.item:first').position()['left']});
  $('.item').mouseover(function () {
   $('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});  
   $('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
  });
 });
 </script>
</head>
<body>
<div id="moving_tab">
 <div class="tabs">
  <div class="lava"></div>
  <span class="item">Popular Posts</span>
  <span class="item">Recent Posts</span>
 </div>
 <div class="content">      
  <div class="panel">      
   <ul>
    <li><a href='#'>Panel 01 Item 01</a></li>
    <li><a href='#'>Panel 01 Item 02</a></li>
    <li><a href='#'>Panel 01 Item 03</a></li>
    <li><a href='#'>Panel 01 Item 04</a></li>
    <li><a href='#'>Panel 01 Item 05</a></li>
   </ul>
   <ul>
    <li><a href='#'>Panel 02 Item 01</a></li>
    <li><a href='#'>Panel 02 Item 02</a></li>
    <li><a href='#'>Panel 02 Item 03</a></li>
    <li><a href='#'>Panel 02 Item 04</a></li>
    <li><a href='#'>Panel 02 Item 05</a></li>   
   </ul>      
  </div>
 </div> 
</div>
</body>
</html>

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

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 #Javascript
Java Mybatis框架入门基础教程
Sep 21 #Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 #Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 #Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 #Javascript
Javascript验证方法大全
Sep 21 #Javascript
JavaScript验证Email(3种方法)
Sep 21 #Javascript
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
限制文本字节数js代码
2007/03/06 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
对python sklearn one-hot编码详解
2018/07/10 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
详解pandas映射与数据转换
2021/01/22 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
《春笋》教学反思
2014/04/15 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
大学生个人求职信例文
2014/07/07 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技