特效介绍
点击左边导航滚动的新闻列表jQuery插件。共分为左右两栏，左边是新闻标题列表，点击后，右边会从下面滑出相应的新闻，并且有“read more”来引导读者查看全文。左边还有左右分页按钮，以显示更多的列表。UI做的非常美观大方。
使用方法
1、在head引入下面的js和css代码：
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Bebas_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon('.cn_wrapper h1,h2', {
textShadow: '-1px 1px black'
});
</script>
<style type="text/css">
span.reference a{
text-shadow:1px 1px 1px #fff;
color:#999;
text-transform:uppercase;
text-decoration:none;
position:fixed;
right:10px;
top:10px;
font-size:13px;
font-weight:bold;
}
span.reference a:hover{
color:#555;
}
h1.title{
color:#777;
font-size:30px;
margin:10px;
font-weight:normal;
text-shadow:1px 1px 1px #fff;
}
</style>
2、下面是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>Polaroid Photobar Gallery with jQuery</h1>
<span class="cn_date">28/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create an image gallery with a Polaroid look.
We will have albums that will expand to sets of slightly rotated thumbnails
that pop out on hover.</p>
<a href="http://www.5imoban.net" title="免费网站模板" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/fullpageimagegallery.jpg" alt=""/>
<h1>Full Page Image Gallery with jQuery</h1>
<span class="cn_date">08/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>In this tutorial we are going to create a stunning full page gallery with
scrollable thumbnails and a scrollable full screen preview.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/collapsingsitenavigation.jpg" alt=""/>
<h1>Collapsing Site Navigation with jQuery</h1>
<span class="cn_date">06/09/2010</span>
<span class="cn_category">Tutorials</span>
<p>
Today we will create a collapsing menu that contains vertical
navigation bars and a slide out content area. When hovering
over a menu item, an image slides down from the top and a
submenu slides up from the bottom.
</p>
<a href="http://www.5imoban.net" title="免费网页特效" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/thumbnailsnavigation.jpg" alt=""/>
<h1>Thumbnails Navigation Gallery with jQuery</h1>
<span class="cn_date">29/07/2010</span>
<span class="cn_category">Tutorials</span>
<p>
In this tutorial we are going to create an extraordinary
gallery with scrollable thumbnails that slide out from a
navigation. We are going to use jQuery and some CSS3
properties for the style.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/musicportfoliotemplate.jpg" alt=""/>
<h1>Music Portfolio Template</h1>
<span class="cn_date">26/07/2010</span>
<span class="cn_category">Development</span>
<p>
Today we want to share a music portfolio template with you.
The idea is to create an artist portfolio with a discography
line up and HTML5 audio player jPlayer.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/relatedpostsslideouts.jpg" alt=""/>
<h1>Related Posts Slide Out Boxes</h1>
<span class="cn_date">21/07/2010</span>
<span class="cn_category">Tutorials</span>
<p>
The main idea is to show a fixed list at the right side
of the screen with some thumbnails sticking out. When
the user hovers over the items, they slide out.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/LatestTweetsTooltip.jpg" alt=""/>
<h1>Latest Tweets Tooltip with jQuery</h1>
<span class="cn_date">20/07/2010</span>
<span class="cn_category">Development</span>
<p>
If you have a news website, it might be interesting
for you to allow your users to see the latests tweets
about a topic. Here is a jQuery plugin for showing the
latest tweets about a certain word or phrase.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/slidedownbox.jpg" alt=""/>
<h1>Slide Down Box Menu with jQuery and CSS3</h1>
<span class="cn_date">16/07/2010</span>
<span class="cn_category">Tutorials</span>
<p>
In this tutorial we will create a unique sliding box
navigation. The idea is to make a box with the menu
item slide out, while a thumbnail pops up.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/MinimalisticSlideshowGallery.jpg" alt=""/>
<h1>Minimalistic Slideshow Gallery with jQuery</h1>
<span class="cn_date">05/07/2010</span>
<span class="cn_category">Tutorials</span>
<p>
In today’s tutorial we will create a simple and
beautiful slideshow gallery that can be easily
integrated in your web site.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/imagehighlight.jpg" alt=""/>
<h1>Image Highlighting and Preview with jQuery</h1>
<span class="cn_date">04/07/2010</span>
<span class="cn_category">Tutorials</span>
<p>
In this tutorial we will show you how to highlight
and preview images that are integrated in an
article or spread over a page.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
<div class="cn_content">
<img src="images/photodesk.jpg" alt=""/>
<h1>模板网</h1>
<span class="cn_date">01/07/2010</span>
<span class="cn_category">Development</span>
<p>
In this little experiment we created an interactive photo
desk that provides some “realistic” interaction possibilities
for the user.
</p>
<a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
</div>
</div>
<div id="cn_list" class="cn_list">
<div class="cn_page" style="display:block;">
<div class="cn_item selected">
<h2>Polaroid Photobar Gallery with jQuery</h2>
<p>Tutorial on how to create a gallery in polaroid style</p>
</div>
<div class="cn_item">
<h2>Full Page Image Gallery with jQuery</h2>
<p>Another tutorial on how to make a full page image gallery with some jQuery</p>
</div>
<div class="cn_item">
<h2>Collapsing Site Navigation with jQuery</h2>
<p>This tutorial shows how to create a stylish sliding site navigation</p>
</div>
<div class="cn_item">
<h2>Thumbnails Navigation Gallery</h2>
<p>This gallery will show images in a scrollable menu navigation</p>
</div>
</div>
<div class="cn_page">
<div class="cn_item">
<h2>Music Portfolio Template</h2>
<p>网页特效,jQuery代码,js特效</p>
</div>
<div class="cn_item">
<h2>Related Posts Slide Out Boxes</h2>
<p>Show users more of your articles with these slide out boxes</p>
</div>
<div class="cn_item">
<h2>Latest Tweets Tooltip with jQuery</h2>
<p>A Plugin for showing the latest tweets with a certain word in your article</p>
</div>
<div class="cn_item">
<h2>Slide Down Box Menu with jQuery and CSS3</h2>
<p>A menu with a nice effect</p>
</div>
</div>
<div class="cn_page">
<div class="cn_item">
<h2>Minimalistic Slideshow Gallery</h2>
<p>A compact image gallery for your website</p>
</div>
<div class="cn_item">
<h2>Image Highlighting and Preview</h2>
<p>Highlight and preview images that are integrated in an article</p>
</div>
<div class="cn_item">
<h2>Interactive Photo Desk</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>
</div>
3、在html代码后面加入下面的js代码：
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<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;
$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>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！