jQuery新聞列表閱讀器選項卡內容滾動切換



109 434 145



特效描述:新聞列表 閱讀器 選項卡切換 內容滾動切換,jQuery新聞列表閱讀器,制作一個選項卡滾動切換效果,點擊左側列表標題,選項卡上下滾動切換相應的列表詳細文章內容。支持分頁的選項卡切換新聞閱讀器。

代碼結構

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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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.17sucai.com/" 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>



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


熱門標簽: 文字疊加 文字層疊 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 滑動選項卡 滑動切換 滾動切換 滾動條切換 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字切換 文字選項卡 文字滾動 文字無縫滾動 文字間歇滾動 文字滑動 文字滑塊 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片文字 文字導航菜單 文字導航 文字菜單 文字 文字插件 滾動切換 滾動條切換 文字列表 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子