以下是 jquery侧边滑出框特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery侧边滑出框特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="keywords" content="jquery, css3"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
background:#BFE2FF;
font-family:Arial;
}
h1{
position:relative;
text-indent:-9000px;
width:633px;
height:150px;
margin:20px;
background:transparent url(title.png) no-repeat top left;
}
.content{
margin:0 auto;
}
a.back{
background:transparent url(back.png) no-repeat top left;
height:13px;
width:248px;
display:block;
clear:both;
text-indent:-9000px;
margin:20px auto;
position:absolute;
bottom:10px;
left:50%;
margin-left:-124px;
}
a.back:hover{
background-position:0px -13px;
}
div.shuffle{
position:fixed;
top:476px;
right:19px;
width:200px;
height:50px;
background:transparent url(shuffle.png) no-repeat top left;
}
div.hover{
position:fixed;
top:68px;
right:90px;
width:253px;
height:65px;
background:transparent url(hover.png) no-repeat top left;
}
</style>
</head>
<body>
<div class="content">
<h1>Realted Posts Slide Out Boxes with jQuery and CSS3</h1>
<div class="shuffle"></div>
<div class="hover"></div>
</div>
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span class="rp_title">Beautiful Background Image Navigation</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/">Article</a>
<a target="_blank" href="#/Tutorials/BeautifulBackgroundImageNavigation/BeautifulBackgroundImageNavigation.zip">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/2.jpg" alt=""/>
<span class="rp_title">Awesome Bubble Navigation with jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/">Article</a>
<a target="_blank" href="#/Tutorials/BubbleNavigation/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/3.jpg" alt=""/>
<span class="rp_title">Stunning Circular Motion Effect with jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/07/stunning-circular-motion-effect/">Article</a>
<a target="_blank" href="#/Tutorials/CircularPortfolio/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/4.jpg" alt=""/>
<span class="rp_title">Fresh Set of CSS-only Menus</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/01/31/fresh-set-of-css-only-menus/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/CSSonlyMenus/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/5.jpg" alt=""/>
<span class="rp_title">Fresh Sliding Thumbnails Gallery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/">Article</a>
<a target="_blank" href="#/Tutorials/FreshSlidingThumbnailsGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/6.jpg" alt=""/>
<span class="rp_title">A jQuery Heat Map</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/02/08/a-jquery-heat-map/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/jQueryHeatMap/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/7.jpg" alt=""/>
<span class="rp_title">jTextTranslate: A jQuery Translation Plugin</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/">Article</a>
<a target="_blank" href="#/jTextTranslate/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/8.jpg" alt=""/>
<span class="rp_title">Awesome Mobile Image Gallery Web App</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/">Article</a>
<a target="_blank" href="#/Tutorials/WonderwallMobileGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/13.jpg" alt=""/>
<span class="rp_title">Awesome CSS3 & jQuery Slide Out Button</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/SlideOutButton/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/14.jpg" alt=""/>
<span class="rp_title">Beautiful Slide Out Navigation</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/">Article</a>
<a target="_blank" href="#/Tutorials/FixedNavigationTutorial/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/9.jpg" alt=""/>
<span class="rp_title">Neat Photo Hover Effect with CSS Sprites and jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/02/22/neat-photo-hover-effect-with-css-sprites-and-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Development/PhotoEffect/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/10.jpg" alt=""/>
<span class="rp_title">Beautiful Photo Stack Gallery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/">Article</a>
<a target="_blank" href="#/Tutorials/PhotoStack/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/11.jpg" alt=""/>
<span class="rp_title">Pimp Your Tables with CSS3</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/03/pimp-your-tables-with-css3/">Article</a>
<a target="_blank" href="#/Tutorials/CSS3Tables/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/12.jpg" alt=""/>
<span class="rp_title">Scrolling to the Top and Bottom with jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/scrollupdown/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/15.jpg" alt=""/>
<span class="rp_title">Awesome Cufonized Fly-out Menu</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">Article</a>
<a target="_blank" href="#/Tutorials/CufonizedFlyOutMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/16.jpg" alt=""/>
<span class="rp_title">Minimalistic Slideshow Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/07/05/minimalistic-slideshow-gallery/">Article</a>
<a target="_blank" href="#/Tutorials/MinimalisticSlideshowGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/17.jpg" alt=""/>
<span class="rp_title">Interactive Photo Desk with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/07/01/interactive-photo-desk/">Article</a>
<a target="_blank" href="#/Development/PhotoDesk/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/18.jpg" alt=""/>
<span class="rp_title">Sliding Panel Photo Wall Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/">Article</a>
<a target="_blank" href="#/Tutorials/SlidingPanelPhotowallGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/19.jpg" alt=""/>
<span class="rp_title">Slide Down Box Menu with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/07/16/slide-down-box-menu/">Article</a>
<a target="_blank" href="#/Tutorials/SlideDownBoxMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/20.jpg" alt=""/>
<span class="rp_title">Multimedia Gallery for Images, Video and Audio</span>
<span class="rp_links">
<a target="_blank" href="#/codrops/2010/06/24/multimedia-gallery/">Article</a>
<a target="_blank" href="#/Development/MultiMediaGallery/">Demo</a>
</span>
</div>
</li>
</ul>
<span id="rp_shuffle" class="rp_shuffle">
</span>
</div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(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);
});
}
});
</script>
</body>
</html>CSS代码(style.css):
.rp_list{font-family:Verdana,Helvetica,sans-serif;position:fixed;right:-220px;top:40px;margin:0;padding:0;}
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;}
.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;}
分享到QQ
分享到微博
微信扫一扫
