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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
javascript date格式化示例
Sep 25 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
jQuery入门介绍之基础知识
2015/01/13 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
Node做中转服务器转发接口
2017/10/18 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python发送告警邮件脚本
2018/09/17 Python
Python底层封装实现方法详解
2020/01/22 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
阿拉伯书店:Jamalon
2019/07/24 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
益模软件Java笔试题
2012/03/27 面试题
大学学习计划书范文
2014/05/02 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js