点击左边导航滚动的新闻列表jQuery插件_网页表格特效,网页浮动层特效,js浮动层特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

点击左边导航滚动的新闻列表jQuery插件。共分为左右两栏，左边是新闻标题列表，点击后，右边会从下面滑出相应的新闻，并且有“read more”来引导读者查看全文。左边还有左右分页按钮，以显示更多的列表。UI做的非常美观大方。

使用方法

1、在head引入下面的js和css代码：

01<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
02<script src="js/cufon-yui.js" type="text/javascript"></script>
03<script src="js/Bebas_400.font.js" type="text/javascript"></script>
04<script type="text/javascript">
05    Cufon('.cn_wrapper h1,h2', {
06        textShadow: '-1px 1px black'
07    });
08</script>
09<style type="text/css">
10  span.reference a{
11    text-shadow:1px 1px 1px #fff;
12    color:#999;
13    text-transform:uppercase;
14    text-decoration:none;
15    position:fixed;
16    right:10px;
17    top:10px;
18    font-size:13px;
19    font-weight:bold;
20  }
21  span.reference a:hover{
22    color:#555;
23  }
24  h1.title{
25      color:#777;
26      font-size:30px;
27      margin:10px;
28      font-weight:normal;
29      text-shadow:1px 1px 1px #fff;
30    }
31</style>

2、下面是html代码

001<div class="cn_wrapper">
002    <div id="cn_preview" class="cn_preview">
003        <div class="cn_content" style="top:5px;">
004            <img src="images/polaroidphotobar.jpg" alt=""/>
005            <h1>Polaroid Photobar Gallery with jQuery</h1>
006            <span class="cn_date">28/09/2010</span>
007            <span class="cn_category">Tutorials</span>
008            <p>In this tutorial we are going to create an image gallery with a Polaroid look.
009                We will have albums that will expand to sets of slightly rotated thumbnails
010                that pop out on hover.</p>
011            <a href="http://www.5imoban.net" title="免费网站模板" target="_blank" class="cn_more">Read more</a>
012        </div>
013        <div class="cn_content">
014            <img src="images/fullpageimagegallery.jpg" alt=""/>
015            <h1>Full Page Image Gallery with jQuery</h1>
016            <span class="cn_date">08/09/2010</span>
017            <span class="cn_category">Tutorials</span>
018            <p>In this tutorial we are going to create a stunning full page gallery with
019                scrollable thumbnails and a scrollable full screen preview.
020                </p>
021            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
022        </div>
023        <div class="cn_content">
024            <img src="images/collapsingsitenavigation.jpg" alt=""/>
025            <h1>Collapsing Site Navigation with jQuery</h1>
026            <span class="cn_date">06/09/2010</span>
027            <span class="cn_category">Tutorials</span>
028            <p>
029                Today we will create a collapsing menu that contains vertical
030                navigation bars and a slide out content area. When hovering
031                over a menu item, an image slides down from the top and a
032                submenu slides up from the bottom.
033            </p>
034            <a href="http://www.5imoban.net" title="免费网页特效" target="_blank" class="cn_more">Read more</a>
035        </div>
036        <div class="cn_content">
037            <img src="images/thumbnailsnavigation.jpg" alt=""/>
038            <h1>Thumbnails Navigation Gallery with jQuery</h1>
039            <span class="cn_date">29/07/2010</span>
040            <span class="cn_category">Tutorials</span>
041            <p>
042                In this tutorial we are going to create an extraordinary
043                gallery with scrollable thumbnails that slide out from a
044                navigation. We are going to use jQuery and some CSS3
045                properties for the style.
046            </p>
047            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
048        </div>
049        <div class="cn_content">
050            <img src="images/musicportfoliotemplate.jpg" alt=""/>
051            <h1>Music Portfolio Template</h1>
052            <span class="cn_date">26/07/2010</span>
053            <span class="cn_category">Development</span>
054            <p>
055                Today we want to share a music portfolio template with you.
056                The idea is to create an artist portfolio with a discography
057                line up and HTML5 audio player jPlayer.
058            </p>
059            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
060        </div>
061        <div class="cn_content">
062            <img src="images/relatedpostsslideouts.jpg" alt=""/>
063            <h1>Related Posts Slide Out Boxes</h1>
064            <span class="cn_date">21/07/2010</span>
065            <span class="cn_category">Tutorials</span>
066            <p>
067                The main idea is to show a fixed list at the right side
068                of the screen with some thumbnails sticking out. When
069                the user hovers over the items, they slide out.
070            </p>
071            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
072        </div>
073        <div class="cn_content">
074            <img src="images/LatestTweetsTooltip.jpg" alt=""/>
075            <h1>Latest Tweets Tooltip with jQuery</h1>
076            <span class="cn_date">20/07/2010</span>
077            <span class="cn_category">Development</span>
078            <p>
079                If you have a news website, it might be interesting
080                for you to allow your users to see the latests tweets
081                about a topic. Here is a jQuery plugin for showing the
082                latest tweets about a certain word or phrase.
083            </p>
084            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
085        </div>
086        <div class="cn_content">
087            <img src="images/slidedownbox.jpg" alt=""/>
088            <h1>Slide Down Box Menu with jQuery and CSS3</h1>
089            <span class="cn_date">16/07/2010</span>
090            <span class="cn_category">Tutorials</span>
091            <p>
092                In this tutorial we will create a unique sliding box
093                navigation. The idea is to make a box with the menu
094                item slide out, while a thumbnail pops up.
095            </p>
096            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
097        </div>
098        <div class="cn_content">
099            <img src="images/MinimalisticSlideshowGallery.jpg" alt=""/>
100            <h1>Minimalistic Slideshow Gallery with jQuery</h1>
101            <span class="cn_date">05/07/2010</span>
102            <span class="cn_category">Tutorials</span>
103            <p>
104                In today’s tutorial we will create a simple and
105                beautiful slideshow gallery that can be easily
106                integrated in your web site.
107            </p>
108            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
109        </div>
110        <div class="cn_content">
111            <img src="images/imagehighlight.jpg" alt=""/>
112            <h1>Image Highlighting and Preview with jQuery</h1>
113            <span class="cn_date">04/07/2010</span>
114            <span class="cn_category">Tutorials</span>
115            <p>
116                In this tutorial we will show you how to highlight
117                and preview images that are integrated in an
118                article or spread over a page.
119            </p>
120            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
121        </div>
122        <div class="cn_content">
123            <img src="images/photodesk.jpg" alt=""/>
124            <h1>模板网</h1>
125            <span class="cn_date">01/07/2010</span>
126            <span class="cn_category">Development</span>
127            <p>
128                In this little experiment we created an interactive photo
129                desk that provides some “realistic” interaction possibilities
130                for the user.
131            </p>
132            <a href="http://www.5imoban.net" target="_blank" class="cn_more">Read more</a>
133        </div>
134    </div>
135    <div id="cn_list" class="cn_list">
136        <div class="cn_page" style="display:block;">
137            <div class="cn_item selected">
138                <h2>Polaroid Photobar Gallery with jQuery</h2>
139                <p>Tutorial on how to create a gallery in polaroid style</p>
140            </div>
141            <div class="cn_item">
142                <h2>Full Page Image Gallery with jQuery</h2>
143                <p>Another tutorial on how to make a full page image gallery with some jQuery</p>
144            </div>
145            <div class="cn_item">
146                <h2>Collapsing Site Navigation with jQuery</h2>
147                <p>This tutorial shows how to create a stylish sliding site navigation</p>
148            </div>
149            <div class="cn_item">
150                <h2>Thumbnails Navigation Gallery</h2>
151                <p>This gallery will show images in a scrollable menu navigation</p>
152            </div>
153        </div>
154        <div class="cn_page">
155            <div class="cn_item">
156                <h2>Music Portfolio Template</h2>
157                <p>网页特效,jQuery代码,js特效</p>
158            </div>
159            <div class="cn_item">
160                <h2>Related Posts Slide Out Boxes</h2>
161                <p>Show users more of your articles with these slide out boxes</p>
162            </div>
163            <div class="cn_item">
164                <h2>Latest Tweets Tooltip with jQuery</h2>
165                <p>A Plugin for showing the latest tweets with a certain word in your article</p>
166            </div>
167            <div class="cn_item">
168                <h2>Slide Down Box Menu with jQuery and CSS3</h2>
169                <p>A menu with a nice effect</p>
170            </div>
171        </div>
172        <div class="cn_page">
173            <div class="cn_item">
174                <h2>Minimalistic Slideshow Gallery</h2>
175                <p>A compact image gallery for your website</p>
176            </div>
177            <div class="cn_item">
178                <h2>Image Highlighting and Preview</h2>
179                <p>Highlight and preview images that are integrated in an article</p>
180            </div>
181            <div class="cn_item">
182                <h2>Interactive Photo Desk</h2>
183                <p>我爱模板网，专业的免费网站模板下载站</p>
184            </div>
185        </div>
186        <div class="cn_nav">
187            <a id="cn_prev" class="cn_prev disabled"></a>
188            <a id="cn_next" class="cn_next"></a>
189        </div>
190    </div>
191</div>

3、在html代码后面加入下面的js代码：

01<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script>
02<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
03<script type="text/javascript">
04    $(function() {
05        var $cn_next    = $('#cn_next');
06        var $cn_prev    = $('#cn_prev');
07        var $cn_list     = $('#cn_list');
08        var $pages        = $cn_list.find('.cn_page');
09        var cnt_pages    = $pages.length;
10        var page        = 1;
11        var $items         = $cn_list.find('.cn_item');
12        var $cn_preview = $('#cn_preview');
13        var current        = 1;
14        $items.each(function(i){
15            var $item = $(this);
16            $item.data('idx',i+1);
17             
18            $item.bind('click',function(){
19                var $this         = $(this);
20                $cn_list.find('.selected').removeClass('selected');
21                $this.addClass('selected');
22                var idx            = $(this).data('idx');
23                var $current     = $cn_preview.find('.cn_content:nth-child('+current+')');
24                var $next        = $cn_preview.find('.cn_content:nth-child('+idx+')');
25                 
26                if(idx > current){
27                    $current.stop().animate({'top':'-300px'},600,'easeOutBack',function(){
28                        $(this).css({'top':'310px'});
29                    });
30                    $next.css({'top':'310px'}).stop().animate({'top':'5px'},600,'easeOutBack');
31                }
32                else if(idx < current){
33                    $current.stop().animate({'top':'310px'},600,'easeOutBack',function(){
34                        $(this).css({'top':'310px'});
35                    });
36                    $next.css({'top':'-300px'}).stop().animate({'top':'5px'},600,'easeOutBack');
37                }
38                current = idx;
39            });
40        });
41        $cn_next.bind('click',function(e){
42            var $this = $(this);
43            $cn_prev.removeClass('disabled');
44            ++page;
45            if(page == cnt_pages)
46                $this.addClass('disabled');
47            if(page > cnt_pages){
48                page = cnt_pages;
49                return;
50            }    
51            $pages.hide();
52            $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
53            e.preventDefault();
54        });
55        $cn_prev.bind('click',function(e){
56            var $this = $(this);
57            $cn_next.removeClass('disabled');
58            --page;
59            if(page == 1)
60                $this.addClass('disabled');
61            if(page < 1){
62                page = 1;
63                return;
64            }
65            $pages.hide();
66            $cn_list.find('.cn_page:nth-child('+page+')').fadeIn();
67            e.preventDefault();
68        });
69         
70    });
71</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

点击左边导航滚动的新闻列表jQuery插件

猜你喜欢