jQuery實(shí)現(xiàn)仿騰訊迷你首頁選項(xiàng)卡效果代碼
更新時(shí)間：2015年09月17日 10:48:31 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊迷你首頁選項(xiàng)卡效果代碼,可實(shí)現(xiàn)tab切換按鈕的左右滑動(dòng)顯示及點(diǎn)擊切換效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)仿騰訊迷你首頁選項(xiàng)卡效果。分享給大家供大家參考。具體如下：
這是一款基于jQuery實(shí)現(xiàn)的選項(xiàng)卡，清爽無修飾版，仿騰訊的迷你首頁。選項(xiàng)卡的前后可以有一個(gè)控件箭頭，點(diǎn)擊這兩個(gè)箭頭可控件選項(xiàng)卡向左、向右滾動(dòng)，在有限的網(wǎng)頁空間內(nèi)布局更多的內(nèi)容成為可能，相信你會(huì)喜歡的。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/
具體代碼如下：
<!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選項(xiàng)卡</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; //定義每個(gè)面板顯示8個(gè)菜單
var len = $(".u .scrol li").length; //獲得LI元素的個(gè)數(shù)
var page = 1;
var maxpage = Math.ceil(len/i);
var scrollWidth = $(".u").width();
var divbox = "<div id='div1' >已經(jīng)到最后一個(gè)面板了</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">選項(xiàng)一</li>
<li>選項(xiàng)二</li>
<li>選項(xiàng)三</li>
<li>選項(xiàng)四</li>
<li>選項(xiàng)五</li>
<li>選項(xiàng)六</li>
<li>選項(xiàng)七</li>
<li>選項(xiàng)八</li>
<li>選項(xiàng)九</li>
<li>選項(xiàng)十</li>
<li>選項(xiàng)11</li>
<li>選項(xiàng)12</li>
<li>選項(xiàng)13</li>
<li>選項(xiàng)14</li>
<li>選項(xiàng)15</li>
<li>選項(xiàng)16</li>
<li>選項(xiàng)17</li>
<li>選項(xiàng)18</li>
<li>選項(xiàng)19</li>
<li>選項(xiàng)20</li>
<li>選項(xiàng)21</li>
<li>選項(xiàng)22</li>
<li>選項(xiàng)23</li>
<li>選項(xiàng)24</li>
</ul>
</div>
<div class="vright"><strong>>></strong></div>
</div>
<div class="tab_content">
<div>
<p>1傳說中的ubuntu火狐瀏覽器，感覺速度不是很理想?？粗鴘盤燈狂閃，還真擔(dān)心這個(gè)獎(jiǎng)品u盤能撐多久。事實(shí)證明離開windows和Mac OS X ，童鞋還是可以從pc發(fā)圍脖的。哈哈。</p>
</div>
<div class="none">
<p>2不知道那個(gè)暖寶寶有沒有用。這幾天腳有點(diǎn)痛了。天冷。剛剛看暖寶寶團(tuán)購(gòu)的人超級(jí)多多。呵呵！！</p>
</div>
<div class="none">
<p>3忙完一陣。今天參觀蒙克博物館、諾貝爾和平中心和當(dāng)代藝術(shù)博物館。學(xué)習(xí)了一下北歐的歷史，它們幾個(gè)國(guó)家的愛和恩怨。。</p>
</div>
<div class="none">
<p>4第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>5溫馨提示1：參加投票，同時(shí)正確參與競(jìng)猜，才有機(jī)會(huì)贏得獎(jiǎng)品哦！ 溫馨提示2：競(jìng)猜結(jié)果請(qǐng)統(tǒng)一發(fā)布在本活動(dòng)的評(píng)論中哈！ 溫性提示3：一個(gè)ID只進(jìn)行一次競(jìng)猜，一次最多可以猜三位明星哈！若出現(xiàn)一個(gè)ID多次競(jìng)猜或一次競(jìng)猜超過三位的情況，均視為無效哦！</p>
</div>
<div class="none">
<p>6關(guān)于上海起火這檔事兒，我做個(gè)小小的提醒。11月15日，就是11月9日后的一周。11月9日是什么日子，中國(guó)的消防日啊。我不知道，消防日后一周內(nèi)發(fā)生的惡性消防事件，讓消防局怎么解釋？開發(fā)商怎么解釋？</p>
</div>
<div class="none">
<p>7 11月17日周三論道話題：熟人多朋友少，是什么讓友誼變了味？超過8成人認(rèn)為“幾乎天天有飯局，卻發(fā)現(xiàn)自己依然很孤獨(dú)?！庇薪话肴恕笆謾C(jī)通訊錄、QQ好友”有50到200個(gè)認(rèn)識(shí)的人，但大部分認(rèn)為真正的朋友沒有幾個(gè)。你是否也碰到過孤單寂寞時(shí)拿起電話又不知打給誰的尷尬。。</p>
</div>
<div class="none">
<p>8第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>9傳說中的ubuntu火狐瀏覽器，感覺速度不是很理想。看著u盤燈狂閃，還真擔(dān)心這個(gè)獎(jiǎng)品u盤能撐多久。事實(shí)證明離開windows和Mac OS X ，童鞋還是可以從pc發(fā)圍脖的。哈哈。</p>
</div>
<div class="none">
<p>10今晚在男生宿舍打邊爐。。呵呵。好好吃啊，肯定又胖兩斤了 。</p>
</div>
<div class="none">
<p>11我很驚訝，昨天與今天，大多外地電視媒體選擇打退堂鼓，而山東衛(wèi)視的記者今天下午來電，說已到上海。我說"好 那我等你"，下飛機(jī)，她先去了現(xiàn)場(chǎng)，20:30到了我們臺(tái)。。。很莫名，我非常感興趣，他們是怎么吃這塊牛肉的。。</p>
</div>
<div class="none">
<p>12剛剛幫小色B寫完我點(diǎn)解崇拜lollipop以及他們對(duì)我的影響之后，突然發(fā)現(xiàn)自己他們真的讓我好迷戀啊，他們的努力，認(rèn)真……突然好想他們能回到從前那樣在一起，雖然他們現(xiàn)在只是公司分開了，但是每次活動(dòng)不再一起出現(xiàn)的時(shí)候，心里總是有一種不怎么好的滋味，因?yàn)樗麄儾耪嬲荓ollipop棒棒堂嘛！50秒前。</p>
</div>
<div class="none">
<p>13哎呀呀，我們的牟導(dǎo)已經(jīng)成微薄控叻， 臨放學(xué)了還不忘問哀家，今晚上“微”嗎。。</p>
</div>
<div class="none">
<p>14第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>15不知道那個(gè)暖寶寶有沒有用。這幾天腳有點(diǎn)痛了。天冷。剛剛看暖寶寶團(tuán)購(gòu)的人超級(jí)多多。呵呵！。</p>
</div>
<div class="none">
<p>16第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>17第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛， 不相對(duì)，如此便可不相會(huì)。 第七最好不相誤，如此便可不相負(fù)。第八最好不相許，如此便可不相續(xù)。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相會(huì)。 第七最好不相誤，如此便可不相負(fù)。第八最好不相許，如此便可不相續(xù)。但曾相見便相知，相見何如不見時(shí)。安得與君相訣絕，免教生死作相思。</p>
</div>
<div class="none">
<p>18第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>19第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛， 不相對(duì)，如此便可不相會(huì)。 第七最好不相誤，如此便可不相負(fù)。第八最好不相許，如此便可不相續(xù)。 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。 相會(huì)。 第七最好不相誤，如此便可不相負(fù)。第八最好不相許，如此便可不相續(xù)。但曾相見便相知，相見何如不見時(shí)。安得與君相訣絕，免教生死作相思。</p>
</div>
<div class="none">
<p>20第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
<div class="none">
<p>21回到了溫馨的房間本應(yīng)該很開心的，可我聽著音樂卻是心事重重的。50秒前。</p>
</div>
<div class="none">
<p>22不要用爾康刷屏我受不了了再刷屏俺就再不用電腦上了我以后都用受機(jī)…………</p>
</div>
<div class="none">
<p>23忙完一陣。今天參觀蒙克博物館、諾貝爾和平中心和當(dāng)代藝術(shù)博物館。學(xué)習(xí)了一下北歐的歷史，它們幾個(gè)國(guó)家的愛和恩怨。。</p>
</div>
<div class="none">
<p>24第一最好不相見，如此便可不相戀。第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相憶。 第五最好不相愛，免教生死作相思。</p>
</div>
</div>
</div>
<div id="js" align="center">刷新一下頁面，點(diǎn)擊左右箭頭 可以滾動(dòng)菜單 當(dāng)滾動(dòng)到最后一個(gè)面板時(shí) 在鼠標(biāo)的右下角會(huì)提示已經(jīng)到最后一個(gè)面板了。</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
- jquery僅用6行代碼實(shí)現(xiàn)滑動(dòng)門效果
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
- jQuery實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換
- 基于jquery自己寫tab滑動(dòng)門(通用版)
- EasySlider 基于jQuery功能強(qiáng)大簡(jiǎn)單易用的滑動(dòng)門插件
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡
- 基于jQuery實(shí)現(xiàn)的仿百度首頁滑動(dòng)選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)經(jīng)典的淡入淡出選項(xiàng)卡效果代碼
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼
相關(guān)文章
本篇文章主要是對(duì)jquery選擇器之基本過濾選擇器進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
jQuery源碼分析-04 選擇器-Sizzle-工作原理分析
在分析Sizzle源碼之前，先整理一下選擇器的工作原理，先明確一些選擇器中用到的名詞，后邊閱讀時(shí)不會(huì)有歧義2011-11-11
JQuery給元素綁定click事件多次執(zhí)行的解決方法
這篇文章主要介紹了JQuery給元素綁定click事件多次執(zhí)行的解決方法,需要的朋友可以參考下2014-05-05
Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法,涉及jQuery頁面元素操作及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
Jquery 設(shè)置標(biāo)題的自動(dòng)翻轉(zhuǎn)
我們平時(shí)在開發(fā)web程序的時(shí)候，想把一個(gè)新聞源滾動(dòng)顯示新聞的條目的標(biāo)題及內(nèi)容摘要，而且是每次一條，有點(diǎn)類似csdn的滾動(dòng)廣告。2009-10-10
jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家看，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
本篇文章主要是對(duì)jquery事件重復(fù)綁定的快速解決方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
jQuery實(shí)現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動(dòng)的效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動(dòng)的效果,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
模板的使用在jqery中還是比較廣泛的，在本文有個(gè)不錯(cuò)的示例，大家可以參考下2013-11-11
AJAX 全稱 Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它并非一種新的技術(shù)，而是以下幾種原有技術(shù)的結(jié)合體。接下來通過本文給大家介紹jQuery Ajax 異步加載顯示等待效果，需要的朋友一起學(xué)習(xí)吧2016-08-08