今天,我们将创建一个新闻一种紧凑的新闻预览方式,它能向你献上最新的文章或新闻。这个新闻预览器 会显示一些文章在左侧,右侧是显示有描述的文章,点击左侧的按钮,可以翻转页查看更多的信息。
标记
我们将创建一个主容器“cn_wrapper”,包含“cn_preview”、和“cn_list”,其中预览区“cn_preview”包含一个预览图像,标题和,文章内容描述。
在左边的列表,将根据文章而编写简短的描述,在左侧,我们还将设置一个导航以便查看容器里的更多内容。
<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...</p> <a href="http://tympanus.net/codrops/2010/09/28/polaroid-photobar-gallery/" 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... </p> <a href="http://tympanus.net/codrops/2010/09/08/full-page-image-gallery/" 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 gallery</p> </div> ... </div> <div class="cn_page"> ... </div> <div class="cn_page"> ... </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>
#cn_wrapper 的边填充5像素,并设置为隐藏,隐藏容器大小为301px。
该项目列表将分为页,每一页最多包含5项。
The CSS
我们将使用大量的CSS3属性,创造一些漂亮的效果。
主容器( .cn_wrapper)设置为相对定位,其他的设置为绝对定位。
.cn_wrapper{
margin:90px auto 0px auto;
width:500px;
height:300px;
position:relative;
color:#fff;
overflow:hidden;
padding:5px;
text-shadow:1px 1px 1px #000;
border:1px solid #111;
background-color:#333;
-moz-box-shadow:1px 1px 4px #222;
-webkit-box-shadow:1px 1px 4px #222;
box-shadow:1px 1px 4px #222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_wrapper h1{
font-size:20px;
text-transform:uppercase;
}
.cn_wrapper h2{
font-size:12px;
border-bottom:1px solid #000;
padding-bottom:4px;
text-transform:uppercase;
}
.cn_preview, .cn_list{
width:250px;
height:300px;
position:absolute;
top:2px;
left:6px;
}
.cn_preview{
left:255px;
}
.cn_content{
border:1px solid #444;
top:310px;/*5*/
left:5px;
width:219px;
padding:10px;
position:absolute;
background-color:#101010;
height:275px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
由于这些元素将在JavaScript动画中应用,因此我们要色这一个比住容器还要大的top属性,这也是我们为什么要设置hidden属性的原因。
.cn_content img{
width:215px;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}
.cn_date{
position:absolute;
bottom:30px;
right:8px;
font-size:11px;
}
.cn_category{
position:absolute;
bottom:30px;
left:8px;
font-size:11px;
padding:1px 3px;
background:#ccc;
border:1px solid #ddd;
color:#000;
text-shadow:-1px 0px 1px #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
文章描述,设置一个固定高度,如果内容超长,将隐藏超出内容。
.cn_content p{
height:57px;
margin-top:2px;
overflow:hidden;
}
a.cn_more{
position:absolute;
padding: 4px 0px;
left:0px;
bottom:0px;
width:236px;
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-shadow:1px 1px 1px #011c44;
text-transform:uppercase;
text-decoration: none;
border:1px solid #4c7ecb;
outline:none;
cursor:pointer;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-border-bottom-left-radius: 5px;
-border-bottom-right-radius: 5px;
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
}
a.cn_more:hover{
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
接下来我们将设置列表的样式。
.cn_item{
border:1px solid #090909;
cursor:pointer;
position:relative;
overflow:hidden;
height:49px;
color:#fff;
padding:5px;
margin:6px 5px 0px 0px;
text-shadow:1px 1px 1px #000;
background:#2b2b2b;
background:
-webkit-gradient(
linear,
left top,
left bottom,
from(#171717),
to(#2b2b2b)
);
background:
-moz-linear-gradient(
top,
#171717,
#2b2b2b
);
-moz-box-shadow:1px 1px 3px #111;
-webkit-box-shadow:1px 1px 3px #111;
box-shadow:1px 1px 3px #111;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.cn_item:hover, .selected{
border-color:#4c7ecb;
background-color: #1951A5;
background-image:
-moz-linear-gradient(
top,
rgba(255,255,255,0.25),
rgba(255,255,255,0.05)
);
background-image:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,0.25)),
color-stop(1, rgba(255,255,255,0.05))
);
}
.cn_item:hover h2,
.cn_list .selected h2,
.cn_item:active h2{
border-color:#2C5FAC;
}
.cn_item:hover p,
.cn_list .selected p,
.cn_item:active p{
border-color:#527CBB;
}
.cn_item:active {
color: #011c44;
text-shadow: 1px 1px 1px #ccdffc;
}
.cn_list p{
height:29px;
padding-top:2px;
overflow:hidden;
border-top:1px solid #333;
}
我们现在来设置导航样式,我们把它设置为绝对底部。
.cn_nav{
width:55px;
height:24px;
position:absolute;
bottom:0px;
left:94px;
}
a.cn_next, a.cn_prev{
float:left;
height:23px;
width:23px;
background-color:#212121;
background-repeat:no-repeat;
background-position:center center;
cursor:pointer;
outline:none;
border:1px solid #111;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
a.cn_next{
background-image:url(../images/next.png);
}
a.cn_prev{
margin-right:5px;
background-image:url(../images/prev.png);
}
.cn_nav a:hover{
background-color:#101010;
}
.cn_nav a:active{
margin-top:1px;
background-color:#000;
}
.cn_nav a.disabled{
opacity:0.5;
}
我们还要定义页列表为不可见,我们将在JavaScript中设置它为可见。
.cn_page{
display:none;
}
The JavaScript
我们将应用 jQuery easing plugin 插件实现一些现实效果。
在我们的jQuery函数,我们将先定义一些变量:
//caching //next and prev buttons var $cn_next = $('#cn_next'); var $cn_prev = $('#cn_prev'); //wrapper of the left items var $cn_list = $('#cn_list'); var $pages = $cn_list.find('.cn_page'); //how many pages var cnt_pages = $pages.length; //the default page is the first one var page = 1; //list of news (left items) var $items = $cn_list.find('.cn_item'); //the current item being viewed (right side) var $cn_preview = $('#cn_preview'); //index of the item being viewed. //the default is the first one var current = 1;
遍历所有items,我们通过绑定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; }); });
现在我们来定义导航的click事件。
$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 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>