jQuery和css3侧边栏显示文章效果jQuery右侧隐藏弹出特效-插件特效-星河码客

一款非常炫酷的jQuery和css3侧边栏滑动显示相关文章插件。该插件将一篇文章的相关文章以侧边栏的形式放置，当鼠标滑过其中一项是相关文章侧边栏滑出显示详细信息。并且可以通过按钮更换一批相关文章。HTML该插件的html结构使用一个嵌套结构的无序列表来制作：

Post Title Article Demo

所有的相关文章都包括在无序列表中，通过jQuery，我们控制每次只显示5篇文章。span rp_shuffle是用来更换一批文章的按钮。JAVASCRIPT首先要做的事情是只显示5篇文章，并在页面显示是快速将其隐藏到只能看见缩略图。这种效果将提示用户：你可以用鼠标放上来试试！当鼠标滑过缩略图，将滑动显示相关文章的全部内容。点击“更换一批”按钮将随机更换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); }); }});css代码请参考下载文件。

jQuery和css3侧边栏显示文章效果jQuery右侧隐藏弹出特效

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»