百度搜索相册拼图，发现匹配的内容很少。因此我决定使用 jQuery 和 CSS3 来实现一款相册拼图插件。
相册拼图在PS软件中较为常见，比如美图秀秀等软件都带有这样的功能。相册拼图就是将多张照片拼接在一起形成一张照片。其效果如下：欢迎大家关注我的博客，如有疑问，请加qq群：454796847、135430763 共同进步！
首先相册中的图片会以一定的角度倾斜放置在页面上，点击图片缩略图就可以展开图片，并且图片是由所有缩略图拼接而成，图片展开和收拢的动画效果也非常不错。当然图片倾斜需要CSS3支持。
相关实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery/CSS3实现拼图效果的相册插件DEMO演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('.description',{ textShadow: '1px 1px #fff'});
Cufon.replace('a',{ textShadow: '1px 1px #fff', hover : true});
</script>
<style type="text/css">
.description{
position:fixed;
right:10px;
top:10px;
font-size:12px;
color:#888;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#888;
text-transform:uppercase;
text-decoration:none;
padding-right:20px;
}
span.reference a:hover{
color:#444;
}
</style>
</head>
<body>
<div id="im_wrapper" class="im_wrapper">
<div style="background-position:0px 0px;"><img src="1.jpg" alt="" /></div>
<div style="background-position:-125px 0px;"><img src="2.jpg" alt="" /></div>
<div style="background-position:-250px 0px;"><img src="3.jpg" alt="" /></div>
<div style="background-position:-375px 0px;"><img src="4.jpg" alt="" /></div>
<div style="background-position:-500px 0px;"><img src="5.jpg" alt="" /></div>
<div style="background-position:-625px 0px;"><img src="6.jpg" alt="" /></div>
<div style="background-position:0px -125px;"><img src="7.jpg" alt="" /></div>
<div style="background-position:-125px -125px;"><img src="8.jpg" alt="" /></div>
<div style="background-position:-250px -125px;"><img src="9.jpg" alt="" /></div>
<div style="background-position:-375px -125px;"><img src="10.jpg" alt="" /></div>
<div style="background-position:-500px -125px;"><img src="11.jpg" alt="" /></div>
<div style="background-position:-625px -125px;"><img src="12.jpg" alt="" /></div>
<div style="background-position:0px -250px;"><img src="13.jpg" alt="" /></div>
<div style="background-position:-125px -250px;"><img src="14.jpg" alt="" /></div>
<div style="background-position:-250px -250px;"><img src="15.jpg" alt="" /></div>
<div style="background-position:-375px -250px;"><img src="16.jpg" alt="" /></div>
<div style="background-position:-500px -250px;"><img src="17.jpg" alt="" /></div>
<div style="background-position:-625px -250px;"><img src="18.jpg" alt="" /></div>
<div style="background-position:0px -375px;"><img src="19.jpg" alt="" /></div>
<div style="background-position:-125px -375px;"><img src="20.jpg" alt="" /></div>
<div style="background-position:-250px -375px;"><img src="21.jpg" alt="" /></div>
<div style="background-position:-375px -375px;"><img src="22.jpg" alt="" /></div>
<div style="background-position:-500px -375px;"><img src="23.jpg" alt="" /></div>
<div style="background-position:-625px -375px;"><img src="24.jpg" alt="" /></div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_next" class="im_next"></div>
<div id="im_prev" class="im_prev"></div>
<div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.transform-0.9.1.min.js"></script>
<script type="text/javascript">
(function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
</script>
<script type="text/javascript">
$(function() {
var ie = false;
if ($.browser.msie)
ie = true;
var flg_click = true;
var $im_wrapper = $('#im_wrapper');
var $thumbs = $im_wrapper.children('div');
var $thumb_imgs = $thumbs.find('img');
var nmb_thumbs = $thumbs.length;
var $im_loading = $('#im_loading');
var $im_next = $('#im_next');
var $im_prev = $('#im_prev');
var per_line = 6;
var per_col = Math.ceil(nmb_thumbs/per_line)
var current = -1;
var mode = 'grid';
var positionsArray = [];
for(var i = 0; i < nmb_thumbs; ++i)
positionsArray[i]=i;
$im_loading.show();
var loaded = 0;
$thumb_imgs.each(function(){
var $this = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src'));
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src').replace('/thumbs',''));
});
function start(){
$im_loading.hide();
disperse();
}
function disperse(){
if(!flg_click) return;
setflag();
mode = 'grid';
var spaces_w = $(window).width()/(per_line + 1);
var spaces_h = $(window).height()/(per_col + 1);
$thumbs.each(function(i){
var $thumb = $(this);
var left = spaces_w*((i%per_line)+1) - $thumb.width()/2;
var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2;
var r = Math.floor(Math.random()*41)-20;
if(ie)
var param = {
'left' : left + 'px',
'top' : top + 'px'
};
else
var param = {
'left' : left + 'px',
'top' : top + 'px',
'rotate' : r + 'deg'
};
$thumb.stop()
.animate(param,700,function(){
if(i==nmb_thumbs-1)
setflag();
})
.find('img')
.fadeIn(700,function(){
$thumb.css({
'background-image' : 'none'
});
$(this).animate({
'width' : '115px',
'height' : '115px',
'marginTop' : '5px',
'marginLeft': '5px'
},150);
});
});
}
function setflag(){
flg_click = !flg_click
}
$thumbs.bind('click',function(){
if(!flg_click) return;
setflag();
var $this = $(this);
current = $this.index();
if(mode == 'grid'){
mode = 'single';
var image_src = $this.find('img').attr('src').replace('/thumbs','');
$thumbs.each(function(i){
var $thumb = $(this);
var $image = $thumb.find('img');
$image.stop().animate({
'width' : '100%',
'height' : '100%',
'marginTop' : '0px',
'marginLeft': '0px'
},150,function(){
var f_w = per_line * 125;
var f_h = per_col * 125;
var f_l = $(window).width()/2 - f_w/2
var f_t = $(window).height()/2 - f_h/2
if(ie)
var param = {
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
else
var param = {
'rotate': '0deg',
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
$thumb.css({
'background-image' : 'url('+image_src+')'
}).stop()
.animate(param,1200,function(){
if(i==nmb_thumbs-1){
addNavigation();
setflag();
}
});
$image.fadeOut(700);
});
});
}
else{
setflag();
removeNavigation();
disperse();
}
});// ：www.xttblog.com
function removeNavigation(){
$im_next.stop().animate({'right':'-50px'},300);
$im_prev.stop().animate({'left':'-50px'},300);
}// ：www.xttblog.com
function addNavigation(){
$im_next.stop().animate({'right':'0px'},300);
$im_prev.stop().animate({'left':'0px'},300);
}// ：www.xttblog.com
$im_next.bind('click',function(){
if(!flg_click) return;
setflag();
++current;
var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($next_thumb.length>0){
var image_src = $next_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
// ：www.xttblog.com
var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
--current;
return;
}
});
// ：www.xttblog.com
$im_prev.bind('click',function(){
if(!flg_click) return;
setflag();
--current;
var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($prev_thumb.length>0){
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
++current;
return;
}
});
// ：www.xttblog.com
$(window).smartresize(function(){
removeNavigation()
disperse();
});
// ：www.xttblog.com
Array.shuffle = function( array ){
for(
var j, x, i = array.length; i;
j = parseInt(Math.random() * i),
x = array[--i], array[i] = array[j], array[j] = x
);
return array;
};
});
</script>
</body>
</html>
欢迎大家关注我的博客，如有疑问，请加qq群：454796847、135430763 共同进步！
： » jQuery+CSS3实现相册拼图效果
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251315.html