首页
所有分类
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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
如何使用JS在HTML中自定义字符串格式化
Jul 20 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 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
R71E(1) DE1107(3) R72E(1) R9700(1) ICOM(2) 对讲机(1) 胆机(1) WR-800F(1) SONY600GR(1) DE1102(1)
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
超级好用的一个php上传图片类(随机名，缩略图，加水印)
2010/06/30 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP Include文件实例讲解
2019/02/15 PHP
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python制作填词游戏步骤详解
2019/05/05 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python中rb含义理解
2020/06/18 Python
阿拉伯世界最大的电子卖场：Souq埃及
2016/08/01 全球购物
英国在线药房：Chemist.co.uk
2019/03/26 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
迟到检讨书500字
2014/02/05 职场文书
校园演讲稿汇总
2014/05/21 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
领导视察通讯稿
2015/07/18 职场文书
周一问候语大全
2015/11/10 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS