jQuery+CSS3实现相册拼图效果

HTML5 herman 597浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

百度搜索相册拼图,发现匹配的内容很少。因此我决定使用 jQueryCSS3 来实现一款相册拼图插件。

相册拼图在PS软件中较为常见,比如美图秀秀等软件都带有这样的功能。相册拼图就是将多张照片拼接在一起形成一张照片。其效果如下:欢迎大家关注我的博客,如有疑问,请加qq群:454796847、135430763 共同进步!

jQuery + CSS3 实现相册拼图

首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错。当然图片倾斜需要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 共同进步!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » jQuery+CSS3实现相册拼图效果