`
齐晓威_518
  • 浏览: 619071 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

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="http://www.codefans.net/ajaxjs/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 选项卡,仿腾讯迷你首页,清爽无修饰版

    jQuery选项卡选项卡选项卡

    本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能,提供多样的皮肤选择,使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素,用于组织和展示大量信息。它通过将相关...

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

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

    jquery 切换选项卡

    在这个场景中,"jquery 切换选项卡" 主要指的是使用 jQuery 来实现的选项卡效果。 首先,我们来理解一下基本的选项卡结构。一个简单的选项卡通常由以下几个部分组成: 1. 选项卡头(Tab Headers):显示各个选项卡...

    jquery选项卡源码

    本资源“jquery选项卡源码”是基于jQuery实现的圆角选项卡功能,适用于那些希望为自己的网站添加美观且实用的导航功能的开发者。 选项卡是一种常见的UI设计模式,用于组织和展示大量信息,通过将内容分组到不同的...

    jquerytabs jquery选项卡 jquery tabs

    jQuery UI的选项卡组件还支持一些事件,允许开发者在特定操作发生时执行自定义代码: - `create`: 当选项卡被创建时触发。 - `activate`: 当选项卡激活状态改变时触发,提供新的和旧的活动选项卡索引作为参数。 - `...

    可以无限增加和华丽滚动的jquery选项卡插件

    标题中的“可以无限增加和华丽滚动的jquery选项卡插件”指的是一个基于jQuery库的UI组件,它允许用户创建能够无限滚动的选项卡界面。这种插件通常用于展示大量内容,如新闻、产品目录或者用户反馈,使得用户可以通过...

    jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据

    在这个场景中,我们讨论的是如何利用jQuery的Ajax功能来创建一个选项卡系统,该系统在用户切换选项卡时能动态地从服务器加载内容。 首先,让我们了解jQuery选项卡的基本结构。通常,选项卡由HTML的`&lt;div&gt;`或`&lt;ul&gt;`...

    jQuery选项卡切换图片异步加载代码.zip

    在网页设计中,jQuery选项卡切换图片异步加载是一种常见的用户体验优化技术,它能提高页面加载速度并降低服务器压力。这种技术尤其适用于图片丰富的网站,如图片相册、产品展示等场景。本压缩包"jQuery选项卡切换...

    jquery 选项卡

    "jQuery 选项卡"是jQuery中常见的交互式组件,常用于展示多部分内容,用户可以通过点击不同的标签切换显示内容。这个压缩包包含了一些基本的资源,可以帮助初学者或者开发者快速理解和实现选项卡功能。 首先,`...

    jquery选项卡切换插件制作slider滑动选项卡切换

    本教程将聚焦于利用jQuery来制作一个滑动选项卡切换插件,即“slider滑动选项卡切换”。这种组件常见于网站的导航、展示内容或者产品介绍中,能够以动态、吸引人的形式展示信息。 首先,我们需要理解jQuery的基本...

    jquery ui仿腾讯web qq界面desktop酷炫特效

    在【jQuery UI仿腾讯Web QQ界面】的设计中,开发者可能利用了jQuery UI的灵活性和强大的功能来创建与腾讯Web QQ类似的桌面风格界面。Web QQ是腾讯公司推出的一款基于网页的即时通讯服务,它的界面设计简洁、直观,...

    jQuery选项卡滑动切换图片代码.zip

    本资源“jQuery选项卡滑动切换图片代码.zip”提供了实现动态、交互式选项卡图片滑动切换功能的代码示例,尤其适用于增强用户界面的吸引力和互动性。 首先,"选项卡(TAB)"是网页布局中的常见组件,它允许将大量信息...

    Jquery UI 选项卡实例

    **jQuery UI 选项卡实例详解** 在Web开发中,选项卡是一种常见的用户界面元素,它可以帮助用户组织和浏览大量信息,提升用户体验。jQuery UI库提供了一套完整的解决方案,包括易于使用的选项卡组件。本实例将深入...

    jquery实现选项卡

    **jQuery实现选项卡** 在网页开发中,选项卡(Tab)是一种常见的用户界面元素,它允许用户通过点击不同的标签来切换不同的内容区域。在JavaScript的世界里,原生JS实现选项卡通常涉及到DOM操作、事件监听以及CSS...

    jQuery仿百度首页滑动选项卡代码

    《jQuery实现百度首页滑动选项卡详解》 在网页设计中,动态的滑动选项卡是一种常见的交互元素,它能够高效地展示多个内容区域,并且通过简洁的方式吸引用户的注意力。本篇文章将深入探讨如何使用jQuery库来实现类似...

    通过jquery+css实现选项卡功能

    本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件,并且需要引入jQuery UI库以增强其表现力和可用性。 首先,我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...

    jQuery选项卡风格下拉导航代码.zip

    在网页设计中,jQuery选项卡风格的下拉导航是一种常见的交互元素,它能有效地组织大量信息,提升用户体验。本资源“jQuery选项卡风格下拉导航代码”提供了实现这种功能的具体代码,尤其适用于企业网站和商城网站,...

    jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击

    本篇文章将深入探讨jQuery选项卡、AJAX选项卡以及静态选项卡的实现方式,同时关注鼠标点击事件在这些选项卡中的应用。 一、jQuery选项卡 jQuery选项卡是一种常见的UI组件,用于展示分段的内容。它们通常用于在有限...

Global site tag (gtag.js) - Google Analytics