jQuery新闻列表阅读器选项卡内容滚动切换实现源码
0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值
<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><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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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-->
友情提示：垃圾评论一律封号 加我微信：826096331拉你进VIP群学习群