類似圖片拼圖遊戲的圖片展示效果基於 jQuery 框架開發

by Fu - 下午3:28

Merging Image Boxes with jQuery 分裂成小縮圖動畫中

Merging Image Boxes with jQuery 以亂數擺放縮圖的角度讓使用者看起來好像是擺放在桌上的照片一樣，當點入一張照片的時候所有的圖片會以動畫方式匯集到中間並且改變圖片內容，轉變成為使用者選重的圖片的那一張大圖，左右會出現上下張的導覽標籤可直些上下張瀏覽，也可以再回到初始的狀態從小縮圖中在瀏覽照片。動畫效果在 Apple Safari 和 Google Chrome 瀏覽最佳。

使用方法：
第一步載入 Merging Image Boxes with jQuery 需要用到的 JavaScript 檔


<!--使用 Google AJAX API 取得 jQuery 框架 1.8.2 的 min 版本-->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<!-- 載入 jQuery transform 動畫特效套件 -->

<script src="js/jquery.transform-0.9.1.min.js"></script>

第二步在 HTML 上擺放照片和導覽列


<div id="im_wrapper" class="im_wrapper">

    <div style="background-position:0px 0px;"><img src="images/thumbs/1.jpg" alt="" /></div>

    <div style="background-position:-125px 0px;"><img src="images/thumbs/2.jpg" alt="" /></div>

    <div style="background-position:-250px 0px;"><img src="images/thumbs/3.jpg" alt="" /></div>

    <div style="background-position:-375px 0px;"><img src="images/thumbs/4.jpg" alt="" /></div>

    <div style="background-position:-500px 0px;"><img src="images/thumbs/5.jpg" alt="" /></div>

    <div style="background-position:-625px 0px;"><img src="images/thumbs/6.jpg" alt="" /></div>

  

    <div style="background-position:0px -125px;"><img src="images/thumbs/7.jpg" alt="" /></div>

    <div style="background-position:-125px -125px;"><img src="images/thumbs/8.jpg" alt="" /></div>

    <div style="background-position:-250px -125px;"><img src="images/thumbs/9.jpg" alt="" /></div>

    <div style="background-position:-375px -125px;"><img src="images/thumbs/10.jpg" alt="" /></div>

    <div style="background-position:-500px -125px;"><img src="images/thumbs/11.jpg" alt="" /></div>

    <div style="background-position:-625px -125px;"><img src="images/thumbs/12.jpg" alt="" /></div>

  

    <div style="background-position:0px -250px;"><img src="images/thumbs/13.jpg" alt="" /></div>

    <div style="background-position:-125px -250px;"><img src="images/thumbs/14.jpg" alt="" /></div>

    <div style="background-position:-250px -250px;"><img src="images/thumbs/15.jpg" alt="" /></div>

    <div style="background-position:-375px -250px;"><img src="images/thumbs/16.jpg" alt="" /></div>

    <div style="background-position:-500px -250px;"><img src="images/thumbs/17.jpg" alt="" /></div>

    <div style="background-position:-625px -250px;"><img src="images/thumbs/18.jpg" alt="" /></div>

  

    <div style="background-position:0px -375px;"><img src="images/thumbs/19.jpg" alt="" /></div>

    <div style="background-position:-125px -375px;"><img src="images/thumbs/20.jpg" alt="" /></div>

    <div style="background-position:-250px -375px;"><img src="images/thumbs/21.jpg" alt="" /></div>

    <div style="background-position:-375px -375px;"><img src="images/thumbs/22.jpg" alt="" /></div>

    <div style="background-position:-500px -375px;"><img src="images/thumbs/23.jpg" alt="" /></div>

    <div style="background-position:-625px -375px;"><img src="images/thumbs/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>

第三步設計照片的 CSS 樣式


*{

 margin:0;

 padding:0;

}

body{

 background:#f0f0f0 url(bg.jpg) repeat top left;

 font-family:Arial, Helvetica, sans-serif;

 font-size:12px;

 color: #555;

}

h1{

 font-size:38px;

 margin:10px;

}

h1 span{

 font-size:20px;

}

.im_wrapper div{

 left:-500px;

 width:125px;

 height:125px;

 position:absolute;

 background-repeat:no-repeat;

 background-color:#fff;

 cursor:pointer;

 -moz-box-shadow:1px 1px 3px #000;

 -webkit-box-shadow:1px 1px 3px #000;

 box-shadow:1px 1px 3px #000;

}

.im_wrapper div img{

 float:left;

 width:115px;

 height:115px;

 margin:5px 0px 0px 5px;

}

.im_loading{

 display:none;

 position:fixed;

 top:50%;

 left:50%;

 margin:-35px 0px 0px -35px;

 background:#fff url(images/loader.gif) no-repeat center center;

 width:70px;

 height:70px;

 z-index:9999;

 -moz-border-radius:10px;

 -webkit-border-radius:10px;

 border-radius:10px;

 -moz-box-shadow:1px 1px 3px #000;

 -webkit-box-shadow:1px 1px 3px #000;

 box-shadow:1px 1px 3px #000;

 opacity:0.7;

 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.im_next,

.im_prev{

 width:50px;

 height:50px;

 position:fixed;

 bottom:50%;

 margin-top:-25px;

 cursor:pointer;

 opacity:0.7;

 z-index:1000;

 -moz-box-shadow:0px 0px 3px #000;

 -webkit-box-shadow:0px 0px 3px #000;

 box-shadow:0px 0px 3px #000;

 -moz-border-radius:2px;

 -webkit-border-radius:2px;

 border-radius:2px;

 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.im_next:hover,

.im_prev:hover

{

 opacity:0.9;

}

.im_next{

 background:#fff url(images/next.png) no-repeat center center;

 right:-50px; /*10 to show*/

}

.im_prev{

 background:#fff url(images/prev.png) no-repeat center center;

 left:-50px; /*10 to show*/

}  

.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;

}

第四步寫入 Merging Image Boxes with jQuery 的 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');

$(function() {

 var ie = false;

 if ($.browser.msie)

  ie = true;

 var flg_click = true;

 //大圖的 ID

    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();

  }

 });

 function removeNavigation(){

  $im_next.stop().animate({'right':'-50px'},300);

  $im_prev.stop().animate({'left':'-50px'},300);

 }

 function addNavigation(){

  $im_next.stop().animate({'right':'0px'},300);

  $im_prev.stop().animate({'left':'0px'},300);

 }

 $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){

   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;

  }

 });

 

 //User clicks prev button (single mode)

 $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;

  }

 });

 $(window).smartresize(function(){

  removeNavigation()

  disperse();

 });

 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;

 };

});

作者網站：http://tympanus.net/codrops/2010/11/30/merging-image-boxes/
檔案大小：1.01 MB (包含範例及圖片)
檔案下載：http://tympanus.net/Development/MergingImageBoxes/MergingImageBoxes.zip
檔案備份：下載

Tags : 前端技術, 網頁設計, CSS, images, javascripts, jQuery

A-Fu Design

類似圖片拼圖遊戲的圖片展示效果基於 jQuery 框架開發

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive

A-Fu Design

類似圖片拼圖遊戲的圖片展示效果基於 jQuery 框架開發

You May Also Like

0 意見

About me

Follow Us

Categories

Recent Posts

Sponsor

Facebook

Blog Archive