以下是 jquery动画切换排序点击放大切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动画切换排序点击放大切换</title>
<link type="text/css" href="css/styles.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="portfolio-content">
<ul class="portfolio-categ filter">
<li>选择分类:</li>
<li class="all active"><a href="#">All</a></li>
<li class="cat-item-1"><a href="#" title="Category 1">分类 1</a></li>
<li class="cat-item-2"><a href="#" title="Category 2">分类 2</a></li>
<li class="cat-item-3"><a href="#" title="Category 3">分类 3</a></li>
<li class="cat-item-4"><a href="#" title="Category 4">分类 4</a></li>
<li class="cat-item-5"><a href="#" title="Category 5">分类 5</a></li>
</ul>
<ul class="portfolio-area">
<li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b1.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/1.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b2.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/2.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-2" data-type="cat-item-2">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b3.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/3.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-3" data-type="cat-item-3">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b4.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/4.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-4" data-type="cat-item-3">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b5.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/5.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-5" data-type="cat-item-5">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b6.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/6.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-6" data-type="cat-item-4">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b7.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/7.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-7" data-type="cat-item-4">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b8.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/8.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-8" data-type="cat-item-3">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b9.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/9.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-9" data-type="cat-item-3">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b10.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/10.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-10" data-type="cat-item-5">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b11.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/11.jpg" alt="Wall-E" title="Wall-E" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="Wall-E">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<li class="portfolio-item2" data-id="id-11" data-type="cat-item-1">
<div>
<span class="image-block">
<a class="image-zoom" href="images/big/b12.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">
<img width="225" height="140" src="images/thumbs/12.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><a href="#" rel="bookmark" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张">内容</a></h2>
<p class="post-subtitle-portfolio">内容</p>
</div>
</div>
</li>
<div class="column-clear"></div>
</ul><!--end portfolio-area -->
</div><!--end portfolio-content -->
</div><!-- end wrapper -->
</body>
</html>
JS代码(script.js):
jQuery.noConflict();
jQuery(document).ready(function($){
function lightboxPhoto(){
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed:'fast',slideshow:5000,theme:'light_rounded',show_title:false,overlay_gallery:false}
);
}
if(jQuery().prettyPhoto){
lightboxPhoto();
}
if (jQuery().quicksand){
// Clone applications to get a second collectionvar $data = $(".portfolio-area").clone();
//NOTE:Only filter on the main portfolio page,not on the subcategory pages$('.portfolio-categ li').click(function(e){
$(".filter li").removeClass("active");
// Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)var filterClass=$(this).attr('class').split(' ').slice(-1)[0];
if (filterClass == 'all'){
var $filteredData = $data.find('.portfolio-item2');
}
else{
var $filteredData = $data.find('.portfolio-item2[data-type=' + filterClass + ']');
}
$(".portfolio-area").quicksand($filteredData,{
duration:600,adjustHeight:'auto'}
,function (){
lightboxPhoto();
}
);
$(this).addClass("active");
return false;
}
);
}
//if quicksand}
);
CSS代码(prettyPhoto.css):
div.light_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat;}
div.light_rounded .pp_top .pp_middle{background:#fff;}
div.light_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat;}
div.light_rounded .pp_content .ppt{color:#000;}
div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right{background:#fff;}
div.light_rounded .pp_content{background-color:#fff;}
div.light_rounded .pp_next:hover{background:url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;cursor:pointer;}
div.light_rounded .pp_previous:hover{background:url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;cursor:pointer;}
div.light_rounded .pp_expand{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer;}
div.light_rounded .pp_expand:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer;}
div.light_rounded .pp_contract{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer;}
div.light_rounded .pp_contract:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer;}
div.light_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer;}
div.light_rounded #pp_full_res .pp_inline{color:#000;}
div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next{margin-top:12px !important;}
div.light_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}
div.light_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}
div.light_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat;}
div.light_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}
div.light_rounded .pp_arrow_next{background:url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat;}
div.light_rounded .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default;}
div.light_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat;}
div.light_rounded .pp_bottom .pp_middle{background:#fff;}
div.light_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat;}
div.light_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat;}
div.dark_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat;}
div.dark_rounded .pp_top .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}
div.dark_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat;}
div.dark_rounded .pp_content_container .pp_left{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;}
div.dark_rounded .pp_content_container .pp_right{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;}
div.dark_rounded .pp_content{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}
div.dark_rounded .pp_next:hover{background:url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor:pointer;}
div.dark_rounded .pp_previous:hover{background:url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor:pointer;}
div.dark_rounded .pp_expand{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer;}
div.dark_rounded .pp_expand:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer;}
div.dark_rounded .pp_contract{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer;}
div.dark_rounded .pp_contract:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer;}
div.dark_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer;}
div.dark_rounded .currentTextHolder{color:#c4c4c4;}
div.dark_rounded .pp_description{color:#fff;}
div.dark_rounded #pp_full_res .pp_inline{color:#fff;}
div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next{margin-top:12px !important;}
div.dark_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}
div.dark_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}
div.dark_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat;}
div.dark_rounded .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}
div.dark_rounded .pp_arrow_next{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat;}
div.dark_rounded .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default;}
div.dark_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat;}
div.dark_rounded .pp_bottom .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat;}
div.dark_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat;}
div.dark_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;}
div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:url(../images/prettyPhoto/dark_square/contentPattern.png) top left repeat;}
div.dark_square .currentTextHolder{color:#c4c4c4;}
div.dark_square .pp_description{color:#fff;}
div.dark_square .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat;}
div.dark_square .pp_content_container .pp_left{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y;}
div.dark_square .pp_content_container .pp_right{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y;}
div.dark_square .pp_expand{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor:pointer;}
div.dark_square .pp_expand:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor:pointer;}
div.dark_square .pp_contract{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor:pointer;}
div.dark_square .pp_contract:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor:pointer;}
div.dark_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor:pointer;}
div.dark_square #pp_full_res .pp_inline{color:#fff;}
div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next{margin-top:12px !important;}
div.dark_square .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}
div.dark_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}
div.dark_square .pp_arrow_previous{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat;}
div.dark_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}
div.dark_square .pp_arrow_next{background:url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat;}
div.dark_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default;}
div.dark_square .pp_next:hover{background:url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor:pointer;}
div.dark_square .pp_previous:hover{background:url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor:pointer;}
div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content{background:#fff;}
div.light_square .pp_content .ppt{color:#000;}
div.light_square .pp_expand{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor:pointer;}
div.light_square .pp_expand:hover{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor:pointer;}
div.light_square .pp_contract{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor:pointer;}
div.light_square .pp_contract:hover{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor:pointer;}
div.light_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor:pointer;}
div.light_square #pp_full_res .pp_inline{color:#000;}
div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px !important;}
div.light_square .pp_nav .pp_play{background:url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px;}
div.light_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px;}
div.light_square .pp_arrow_previous{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat;}
div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default;}
div.light_square .pp_arrow_next{background:url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat;}
div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default;}
div.light_square .pp_next:hover{background:url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor:pointer;}
div.light_square .pp_previous:hover{background:url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor:pointer;}
div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat;}
div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x;}
div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat;}
div.facebook .pp_content .ppt{color:#000;}
div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y;}
div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y;}
div.facebook .pp_content{background:#fff;}
div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer;}
div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer;}
div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer;}
div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer;}
div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer;}
div.facebook #pp_full_res .pp_inline{color:#000;}
div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat;}
div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px;}
div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default;}
div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px;}
div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default;}
div.facebook .pp_nav{margin-top:0;}
div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px;}
div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px;}
div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px;}
div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer;}
div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer;}
div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat;}
div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x;}
div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat;}
div.pp_pic_holder a:focus{outline:none;}
div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500;}
div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000;}
.pp_top{height:20px;position:relative;}
* html .pp_top{padding:0 20px;}
.pp_top .pp_left{height:20px;left:0;position:absolute;width:20px;}
.pp_top .pp_middle{height:20px;left:20px;position:absolute;right:20px;}
* html .pp_top .pp_middle{left:0;position:static;}
.pp_top .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}
.pp_content{height:40px;}
.pp_fade{display:none;}
.pp_content_container{position:relative;text-align:left;width:100%;}
.pp_content_container .pp_left{padding-left:20px;}
.pp_content_container .pp_right{padding-right:20px;}
.pp_content_container .pp_details{float:left;margin:10px 0 2px 0;}
.pp_description{display:none;margin:0 0 5px 0;}
.pp_nav{clear:left;float:left;margin:3px 0 0 0;}
.pp_nav p{float:left;margin:2px 4px;}
.pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px;}
a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px;}
.pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000;}
.pp_gallery{left:50%;margin-top:-50px;position:absolute;z-index:10000;}
.pp_gallery ul{float:left;height:35px;margin:0 0 0 5px;overflow:hidden;padding:0;position:relative;}
.pp_gallery ul a{border:1px #000 solid;border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden;}
.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff;}
.pp_gallery ul a img{border:0;}
.pp_gallery li{display:block;float:left;margin:0 5px 0 0;}
.pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px;}
.pp_gallery li.default a img{display:none;}
.pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px !important;}
a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%;}
a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%;}
a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000;}
a.pp_close{display:block;float:right;line-height:22px;text-indent:-10000px;}
.pp_bottom{height:20px;position:relative;}
* html .pp_bottom{padding:0 20px;}
.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px;}
.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px;}
* html .pp_bottom .pp_middle{left:0;position:static;}
.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px;}
.pp_loaderIcon{display:block;height:24px;left:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;width:24px;}
#pp_full_res{line-height:1 !important;}
#pp_full_res .pp_inline{text-align:left;}
#pp_full_res .pp_inline p{margin:0 0 15px 0;}
div.ppt{color:#fff;display:none;font-size:17px;margin:0 0 5px 15px;z-index:9999;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
.pp_gallery a{background:none !important;border:none !important;display:none !important;height:146px;padding:2px !important;width:235px;}
CSS代码(styles.css):
/* RESET STYLES */
*,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
q:before,q:after{content:''}
strong{font-weight:bold}
em{font-style:italic}
.aligncenter{display:block;margin:0 auto}
.alignleft{float:left}
.alignright{float:right}
div{position:relative}
/* END RESET STYLES */
html{-webkit-font-smoothing:antialiased;}
body{background:#f5f5f5 url("../images/bkg-pat.png") repeat scroll 0 0;font:12px/1.5em Arial,Helvetica,sans-serif,"Arial Narrow";color:#a5a5a5;}
a{color:#65a42d;text-decoration:none;}
a:hover{color:#65a42d;text-decoration:underline;}
.column-clear{clear:both;}
.wrapper{margin:0px auto;padding:0px;width:1080px;}
.portfolio-content,.portfolio-area{width:1080px;}
.title-page{font-size:40px;margin:50px 0px 60px 0px;color:#151515;}
.goto{float:right;width:130px;margin:-80px 30px 0px 0px;}
/**** PORTFOLIO STYLES*****/
.portfolio-categ{margin-bottom:30px;}
.portfolio-categ li{display:inline;margin-right:10px;}
.image-block{display:block;position:relative;}
.image-block img{border:1px solid #d5d5d5;border-radius:4px 4px 4px 4px;background:#FFFFFF;padding:10px;}
.image-block img:hover{border:1px solid #A9CF54;box-shadow:0 0 5px #A9CF54;}
.portfolio-area li{float:left;margin:0 12px 20px 0;overflow:hidden;width:245px;padding:5px;}
.home-portfolio-text{margin-top:10px;}
li.active a{text-decoration:underline;}
/**** END PORTFOLIO STYLES*****/
分享到QQ
分享到微博
微信扫一扫
