jQuery新聞列表tab選項卡內容滾動切換



76 301 101



特效描述:jQuery新聞列表 tab選項卡 內容滾動切換,jQuery新聞列表tab選項卡內容滾動切換

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

3. HTML代碼

<div class="cn_wrapper">
	<div id="cn_preview" class="cn_preview">
		<div class="cn_content" style="top:5px;">
			<img src="images/polaroidphotobar.jpg" alt=""/>
			<h1>寶麗來Photobar畫廊與jQuery</h1>
			<span class="cn_date">28/09/2010</span>
			<span class="cn_category">教程</span>
			<p>在本教程中,我們將創建一個圖像畫廊與寶麗來看看.我們將有專輯,這將擴大到套稍微旋轉縮略圖那個流行在盤旋.</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/fullpageimagegallery.jpg" alt=""/>
			<h1>全屏圖片廊與jQuery</h1>
			<span class="cn_date">08/09/2010</span>
			<span class="cn_category">教程</span>
			<p>在本教程中,我們將創建一個驚人的滾動縮略圖和一個可擴展的全屏幕預覽頁畫廊。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/collapsingsitenavigation.jpg" alt=""/>
			<h1>折疊網站導航使用jQuery</h1>
			<span class="cn_date">06/09/2010</span>
			<span class="cn_category">教程</span>
			<p>今天,我們將創建一個折疊菜單,其中包含垂直導航欄和一個滑出式的內容區域。當鼠標懸停在菜單項上,圖像的頂部和一個從向下滑動子菜單從下往上滑動。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/thumbnailsnavigation.jpg" alt=""/>
			<h1>使用jQuery的縮略圖導航庫</h1>
			<span class="cn_date">29/07/2010</span>
			<span class="cn_category">教程</span>
			<p>在本教程中,我們將創建一個非凡滾動的縮略圖,畫廊,從滑出導航。我們將使用jQuery和一些CSS3屬性的風格。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/musicportfoliotemplate.jpg" alt=""/>
			<h1>音樂組合模板</h1>
			<span class="cn_date">26/07/2010</span>
			<span class="cn_category">開發</span>
			<p>今天,我們想與您分享音樂組合模板。我們的想法是創建一個唱片的藝術家組合排隊和HTML5音頻播放器jPlayer。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/relatedpostsslideouts.jpg" alt=""/>
			<h1>相關文章滑出盒</h1>
			<span class="cn_date">21/07/2010</span>
			<span class="cn_category">教程</span>
			<p>其主要思想是在右側顯示一個固定的列表一些縮略圖伸出的畫面。何時用戶將鼠標懸停在項目中,他們滑出。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
		<div class="cn_content">
			<img src="images/LatestTweetsTooltip.jpg" alt=""/>
			<h1>最新的鳴叫工具提示使用jQuery</h1>
			<span class="cn_date">20/07/2010</span>
			<span class="cn_category">開發</span>
			<p>如果你有一個新聞網站,它可能是有趣的,你允許你的用戶看到最新tweet的一個話題。這里顯示的是一個jQuery插件最新的鳴叫關于某個單詞或短語。</p>
			<a href="http://www.cqetom.live//" target="_blank" class="cn_more">Read more</a>
		</div>
	</div><!--cn_preview end-->
	<div id="cn_list" class="cn_list">
		<div class="cn_page" style="display:block;">
			<div class="cn_item selected">
				<h2>寶麗來Photobar畫廊與jQuery</h2>
				<p>教程中關于如何創建一個畫廊在寶麗來的風格</p>
			</div>
			<div class="cn_item">
				<h2>全屏圖片廊與jQuery</h2>
				<p>另一個教程如何使一個完整的頁面圖像畫廊與一些jQuery</p>
			</div>
			<div class="cn_item">
				<h2>折疊網站導航使用jQuery</h2>
				<p>本教程演示如何創建一個時尚的側滑網站導航</p>
			</div>
			<div class="cn_item">
				<h2>縮略圖導航庫</h2>
				<p>這個畫廊圖像將顯示在一個可滾動的菜單導航</p>
			</div>
		</div>
		<div class="cn_page">
			<div class="cn_item">
				<h2>音樂組合模板</h2>
				<p>與HTML5的音頻播放器的音樂作品集網站模板</p>
			</div>
			<div class="cn_item">
				<h2>相關文章滑出盒</h2>
				<p>顯示了用戶更多的你的文章,這些幻燈片盒</p>
			</div>
			<div class="cn_item">
				<h2>最新的鳴叫工具提示使用jQuery</h2>
				<p>在你的文章中展示了最新的鳴叫某個單詞的一個插件</p>
			</div>
		</div>
		<div class="cn_nav">
			<a id="cn_prev" class="cn_prev disabled"></a>
			<a id="cn_next" class="cn_next"></a>
		</div>
	</div><!--cn_list end-->
</div><!--cn_wrapper end-->
<script type="text/javascript">
$(function() {
	// 下一步和上一步按鈕
	var $cn_next	= $('#cn_next');
	var $cn_prev	= $('#cn_prev');
	// 包裝器的左側的項目
	var $cn_list 	= $('#cn_list');
	var $pages		= $cn_list.find('.cn_page');
	// 有多少頁
	var cnt_pages	= $pages.length;
	// 默認頁是第一個
	var page		= 1;
	// 新聞列表(左項)
	var $items 		= $cn_list.find('.cn_item');
	// 他當前正在查看的項目(右側)
	var $cn_preview = $('#cn_preview');
	//正在查看的項目索引 
	//在默認情況下是第一位的
	var current	= 1;
	/* 對于每一個項目,我們所有的文件存儲指數相對于,我們綁定一個click事件滑動,向上或向下目前的項目滑動向上或向下的點擊,如果點擊產品后或向上或向下移動,將取決于當前項 */
	$items.each(function(i){
		var $item = $(this);
		$item.data('idx',i+1);
		$item.bind('click',function(){
			var $this = $(this);
			$cn_list.find('.selected').removeClass('selected');
			$this.addClass('selected');
			var idx = $(this).data('idx');
			var $current = $cn_preview.find('.cn_content:nth-child('+current+')');
			var $next = $cn_preview.find('.cn_content:nth-child('+idx+')');
			if(idx > current){
				$current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
					$(this).css({'top':'310px'});
				});
				$next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
			}else if(idx < current){
				$current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
					$(this).css({'top':'310px'});
				});
				$next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
			}
			current = idx;
		});
	});
	/* 如果存在,則顯示下一頁:下頁淡入,還檢查按鈕應該被停用 */
	$cn_next.bind('click',function(e){
		var $this = $(this);
		$cn_prev.removeClass('disabled');
		++page;
		if(page == cnt_pages)
		$this.addClass('disabled');
		if(page > cnt_pages){ 
			page = cnt_pages;
			return;
		}	
		$pages.hide();
		$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
		e.preventDefault();
	});
	/* 如果存在,則顯示前一頁:前一頁消失,還檢查按鈕應該被停用 */
	$cn_prev.bind('click',function(e){
		var $this = $(this);
		$cn_next.removeClass('disabled');
		--page;
		if(page == 1)
		$this.addClass('disabled');
		if(page < 1){ 
			page = 1;
			return;
		}
		$pages.hide();
		$cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
		e.preventDefault();
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 圖片放大鏡 圖片疊加 圖片層疊 圖片翻轉 圖片旋轉 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片拖動 圖片拖拽 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 滾動切換 滾動條切換 滑動選項卡 滑動切換 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 帶縮略圖的幻燈片 圖片廣告 地圖 中國地圖 世界地圖 純圖片輪播 圖片輪播 圖片切換 圖片選項卡 圖標選項卡 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滾動 圖片滾動條 圖片滑動 圖片滑塊 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 背景切換 大圖切換 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖表 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片 圖片插件 頭像截圖 帶簡介的焦點圖 圖片切換 圖片選項卡 圖標選項卡 圖片文字滾動 文字圖片滾動 選項卡自動切換 圖片切換 切換圖片 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子