首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现仿腾讯迷你首页选项卡效果代码

Posted in Javascript onSeptember 17, 2015

本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现的选项卡，清爽无修饰版，仿腾讯的迷你首页。选项卡的前后可以有一个控件箭头，点击这两个箭头可控件选项卡向左、向右滚动，在有限的网页空间内布局更多的内容成为可能，相信你会喜欢的。

运行效果截图如下：

jQuery实现仿腾讯迷你首页选项卡效果代码

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery选项卡</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ font-size:12px;}
ul,li{ list-style-type:none;}
#tab{ width:500px; height:200px; margin:20px auto; overflow:hidden;}
#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}
#tab .tab_title .u{ width:465px; overflow:hidden; position:relative;}
#tab .tab_title ul{ margin:0 5px; position:absolute; float:left; width:1392px;}
#tab .tab_title div{ float:left;width:15px; height:20px; line-height:20px; cursor:pointer;}
#tab .tab_title span.vright{top:0; right:5px; margin-left:2px;}
#tab .tab_title span.vleft{top:0; left:0px; padding-left:5px;}
#tab .tab_title li{ float:left; width:50px; height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:6px; border:1px #999999 solid; cursor:pointer;}
#tab .tab_title li:hover{ background-color:#999999}
#tab .tab_title li.selected{ background-color:#666666;}
#tab .tab_content{ width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid;}
#tab .tab_content div{ border:1px #999999 dotted; }
#tab .tab_content div p{ line-height:1.5; text-indent:25px; color:#333333;}
#tab .tab_content .none{ display:none;}
#div1{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}
#div2{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px; color:#999999;}
 -->
</style>
<script language="javascript">
 $(function(){
  var index = 0; 
  $(".tab_title ul li").click(function(){
   index = $(".tab_title ul li").index(this);
   $(this).addClass("selected").siblings().removeClass("selected");
   $(".tab_content div").eq(index).show().siblings().hide();
  });
  var i = 8; //定义每个面板显示8个菜单
  var len = $(".u .scrol li").length; //获得LI元素的个数
  var page = 1;
  var maxpage = Math.ceil(len/i);
  var scrollWidth = $(".u").width();
  var divbox = "<div id='div1' >已经到最后一个面板了</div>";
  $("body").append(divbox);
  $(".vright").click(function(e){
   if(!$(".u .scrol").is(":animated")){
   if(page == maxpage ){
    $(".u .scrol").stop();
    $("#div1").css({
     "top": (e.pageY + 20) +"px",
     "left": (e.pageX + 20) +"px",
     "opacity": "0.9"
    }).stop(true,false).fadeIn(800).fadeOut(800);
   }else{
    $(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
    page++;
   }
   }
  });
  $(".vleft").click(function(){
  if(!$(".u .scrol").is(":animated")){
   if(page == 1){
   $(".u .scrol").stop();
   }else{
   $(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
   page--;
   }
   }
  });
 });
</script>
</head>
<body>
<div id="tab">
 <div class="tab_title">
 <div class="vleft"><strong><<</strong></div>
 <div class="u">
 <ul class="scrol">
 <li class="selected">选项一</li>
 <li>选项二</li>
 <li>选项三</li>
 <li>选项四</li>
 <li>选项五</li>
 <li>选项六</li>
 <li>选项七</li>
 <li>选项八</li>
 <li>选项九</li>
 <li>选项十</li>
 <li>选项11</li>
 <li>选项12</li>
 <li>选项13</li>
 <li>选项14</li>
 <li>选项15</li>
 <li>选项16</li>
 <li>选项17</li>
 <li>选项18</li>
 <li>选项19</li>
 <li>选项20</li>
 <li>选项21</li>
 <li>选项22</li>
 <li>选项23</li>
 <li>选项24</li>
 </ul>
 </div>
 <div class="vright"><strong>>></strong></div>
 </div>
 <div class="tab_content">
 <div>
 <p>1传说中的ubuntu火狐浏览器，感觉速度不是很理想。看着u盘灯狂闪，还真担心这个奖品u盘能撑多久。事实证明离开windows和Mac OS X ，童鞋还是可以从pc发围脖的。哈哈。</p>
 </div>
 <div class="none">
 <p>2不知道那个暖宝宝有没有用。这几天脚有点痛了。天冷。刚刚看暖宝宝团购的人超级多多。呵呵！！</p>
 </div>
 <div class="none">
  <p>3忙完一阵。今天参观蒙克博物馆、诺贝尔和平中心和当代艺术博物馆。学习了一下北欧的历史，它们几个国家的爱和恩怨。。</p>
 </div>
 <div class="none">
  <p>4第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>5温馨提示1：参加投票，同时正确参与竞猜，才有机会赢得奖品哦！ 温馨提示2：竞猜结果请统一发布在本活动的评论中哈！ 温性提示3：一个ID只进行一次竞猜，一次最多可以猜三位明星哈！若出现一个ID多次竞猜或一次竞猜超过三位的情况，均视为无效哦！</p>
 </div>
 <div class="none">
  <p>6关于上海起火这档事儿，我做个小小的提醒。11月15日，就是11月9日后的一周。11月9日是什么日子，中国的消防日啊。我不知道，消防日后一周内发生的恶性消防事件，让消防局怎么解释？开发商怎么解释？</p>
 </div>
 <div class="none">
  <p>7 11月17日周三论道话题：熟人多朋友少，是什么让友谊变了味？超过8成人认为“几乎天天有饭局，却发现自己依然很孤独。”有近一半人“手机通讯录、QQ好友”有50到200个认识的人，但大部分认为真正的朋友没有几个。你是否也碰到过孤单寂寞时拿起电话又不知打给谁的尴尬。。</p>
 </div>
 <div class="none">
  <p>8第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>9传说中的ubuntu火狐浏览器，感觉速度不是很理想。看着u盘灯狂闪，还真担心这个奖品u盘能撑多久。事实证明离开windows和Mac OS X ，童鞋还是可以从pc发围脖的。哈哈。</p>
 </div>
 <div class="none">
  <p>10今晚在男生宿舍打边炉。。呵呵。好好吃啊，肯定又胖两斤了 。</p>
 </div>
 <div class="none">
  <p>11我很惊讶，昨天与今天，大多外地电视媒体选择打退堂鼓，而山东卫视的记者今天下午来电，说已到上海。我说"好 那我等你"，下飞机，她先去了现场，20:30到了我们台。。。很莫名，我非常感兴趣，他们是怎么吃这块牛肉的。。</p>
 </div>
 <div class="none">
  <p>12刚刚帮小色B写完我点解崇拜lollipop以及他们对我的影响之后，突然发现自己他们真的让我好迷恋啊，他们的努力，认真……突然好想他们能回到从前那样在一起，虽然他们现在只是公司分开了，但是每次活动不再一起出现的时候，心里总是有一种不怎么好的滋味，因为他们才真正是Lollipop棒棒堂嘛！50秒前。</p>
 </div>
 <div class="none">
  <p>13哎呀呀，我们的牟导已经成微薄控叻， 临放学了还不忘问哀家，今晚上“微”吗。。</p>
 </div>
 <div class="none">
  <p>14第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>15不知道那个暖宝宝有没有用。这几天脚有点痛了。天冷。刚刚看暖宝宝团购的人超级多多。呵呵！。</p>
 </div>
 <div class="none">
  <p>16第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>17第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱， 不相对，如此便可不相会。 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相会。 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>18第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>19第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱， 不相对，如此便可不相会。 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相会。 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>20第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 <div class="none">
  <p>21回到了温馨的房间本应该很开心的，可我听着音乐却是心事重重的。50秒前。</p>
 </div>
 <div class="none">
  <p>22不要用尔康刷屏我受不了了再刷屏俺就再不用电脑上了我以后都用受机…………</p>
 </div>
 <div class="none">
  <p>23忙完一阵。今天参观蒙克博物馆、诺贝尔和平中心和当代艺术博物馆。学习了一下北欧的历史，它们几个国家的爱和恩怨。。</p>
 </div>
 <div class="none">
  <p>24第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。 第五最好不相爱，免教生死作相思。</p>
 </div>
 </div>
</div>
<div id="js" align="center">刷新一下页面，点击左右箭头 可以滚动菜单 当滚动到最后一个面板时 在鼠标的右下角会提示已经到最后一个面板了。</div>
</body>
</html>

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

jQuery实现仿腾讯迷你首页选项卡效果代码

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
Bootstrap源码解读网格系统（3）
Dec 22 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
优先队列(1) Carbon(1) Dijkstra(1) seata(1) 迪杰斯特拉(1) element-ui(1) 动态代理(1) pongo2(1) 三角函数(1) 模板引擎(1)
You might like
php adodb介绍
2009/03/19 PHP
php ss7.5的数据调用 （笔记）
2010/03/08 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
php文件包含的几种方式总结
2019/09/19 PHP
jQuery使用手册之一
2007/03/24 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
如何基于python实现归一化处理
2020/01/20 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
美国最大的香水连锁店官网：Perfumania
2016/08/15 全球购物
State Cashmere官网：半零售价可持续蒙古羊绒
2020/02/26 全球购物
犯错检讨书
2014/02/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
网络舆情信息简报
2015/07/21 职场文书
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android