前几天，我们想知道怎样才能让我们的游客更多地了解我们的作品。在博客中，老帖子被遗忘，即使有些事情可能仍然很有趣，很有意义，但在一堆新东西下，它就会消失。所以我们决定创建一个小部件，可以用来在任何页面中显示相关的帖子。主要的想法是在屏幕的右侧显示一个固定的列表，并突出显示一些缩略图。当用户在项目上徘徊时，他们会滑出，显示标题和两个链接，一个是相关的文章本身，一个是演示。另外，我们将在列表下面有一个shuffle按钮。当按下时，列表会随机地刷新相关的帖子。
在我们使用这个之前，我们当然想和你分享它:)
所以,让我们开始吧!
标记
HTML结构将是一个包含一些嵌套元素的列表:主div和缩略图，标题的跨度和两个链接的跨度:
<div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Post Title</span> <span class="rp_links"> <a target="_blank" href="#">Article</a> <a target="_blank" href="#">Demo</a> </span> </div> </li> ... </ul> <span id="rp_shuffle" class="rp_shuffle"></span></div>
所有相关的职位都将在我们的结构中列出。在JavaScript中，我们将定义一次只显示5个帖子。当然，您需要用链接替换#。
shuffle span将被定位在列表之后。
让我们来看看它的风格。
CSS
我们将从一般的样式属性开始:
.rp_list { font-family:Verdana, Helvetica, sans-serif; position:fixed; right:-220px; top:40px; margin:0; padding:0;}如您所见，这个列表将有一个固定的位置，当用户滚动页面时，它总是停留在相同的位置。我们要把这个值设为负值，把整个列表都藏起来。
接下来，让我们来定义shuffle span样式:
span.rp_shuffle{ background:#222 url(../images/shuffle.png) no-repeat 10px 50%; width:28px; height:14px; display:block; margin:10px 0px 0px 20px; cursor:pointer; padding:4px; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px;}该列表将有以下样式:
.rp_list ul{ margin:0; padding:0; list-style:none;}清单上的项目不会一开始就显示出来:
.rp_list ul li{ width: 240px; margin-bottom:5px; display:none;}我们的主要元素将有以下风格:
.rp_list ul li div{ display: block; line-height:15px; width: 240px; height: 80px; background:#333; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px;}这个缩略图的大小是70 70像素，我们会给它添加一个方框阴影:
.rp_list ul li div img{ width:70px; border:none; float:left; margin:4px 10px 0px 4px; border:1px solid #111; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000;}标题将会有一个嵌入的阴影
span.rp_title{ font-size:11px; color:#ddd; height:46px; margin:4px 0px 0px 20px; display:block; text-shadow:1px 1px 1px #000; padding-top:3px; background:#222; -moz-box-shadow:0px 0px 5px #000 inset; -webkit-box-shadow:0px 0px 5px #000 inset; box-shadow:0px 0px 5px #000 inset;}链接和按钮的跨度将有以下样式:
span.rp_links{ width:195px; height:8px; padding-top:2px; display:block; margin-left:42px;}span.rp_links a{ background: #222 url(../images/bgbutton.png) repeat-x; padding: 2px 18px; font-size:10px; color: #fff; text-decoration: none; line-height: 1; -moz-box-shadow: 0 1px 3px #000; -webkit-box-shadow: 0 1px 3px #000; box-shadow:0 1px 3px #000; text-shadow: 0 -1px 1px #222; cursor: pointer; outline:none;}span.rp_links a:hover{ background-color:#000; color:#fff;}这就是所有的风格。让我们添加一些魔法!
JavaScript
主要的想法是首先显示5个项目的整个宽度，然后快速地将它们滑动到一个只能看到缩略图的地方。当我们加载页面时，这应该会发生。这是一个很好的效果，可以向用户显示正在发生的事情，并且他可以与这个元素交互。
当我们悬停在一个项目上时，我们会让它滑出直到它的全部宽度，显示标题和链接。
shuffle功能将使5个帖子随机出现。正如你所注意到的，我们将所有相关的贴子添加到HTML结构中，从这些项目中，我们将随机选择5个。这个方法不能保证我们不会重复显示的下一组项目，但它是一个简单的解决方案。
我们将添加以下jQuery功能:
$(function() { /**
* the list of posts
*/
var $list = $('#rp_list ul'); /**
* number of related posts
*/
var elems_cnt = $list.children().length; /**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200); function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else
$elem.show();
++loaded;
} //animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({ 'marginLeft':'-50px'
},d += 100);
});
} /**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({ 'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({ 'marginLeft':'-50px'
},200);
}); /**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700); function shuffle(){
$list.find('li:visible div').stop().animate({ 'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});这就是一切!
我们希望您喜欢本教程并发现它很有用!