效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/30.htm

本特效支持jquery的版本为1.4.3,暂时不支持1.9以上jquery版本。

代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<meta name="keywords" content="" />"

<meta name="description" content="" />

<title>jQuery拼图照片墙相册--柯乐义</title>

<link rel="stylesheet" href="30/css/keleyitupianqiang.css" type="text/css" media="screen" />

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.3.min.js"></script>

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

</head>

<body>

<!-- 代码 开始 -->

<h1>图片墙相册 合并图片盒<span> 使用jQuery <a href="http://keleyi.com/a/bjad/g2espcgs.htm">原文</a></span></h1>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div>

<span class="reference">

<a href="http://keleyi.com">Home</a>

<a href="http://keleyi.com">Images by keleyi</a>

</span>

</div>

<!-- The JavaScript -->

<script type="text/javascript">

//Paul Irish smartresize : http://keleyi.com

// debouncing function from John Hann

// http://keleyi.com/

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

};

}

//smartresize

jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

</script>

<script type="text/javascript">

$(function() {

//check if the user made the

//mistake to open it with IE

var ie = false;

if ($.browser.msie)

ie = true;

//flag to control the click event

var flg_click = true;

//the wrapper

var $im_wrapper = $('#im_wrapper');

//the thumbs

var $thumbs = $im_wrapper.children('div');

//all the images

var $thumb_imgs = $thumbs.find('img');

//number of images

var nmb_thumbs = $thumbs.length;

//image loading status

var $im_loading = $('#im_loading');

//the next and previous buttons

var $im_next = $('#im_next');

var $im_prev = $('#im_prev');

//number of thumbs per line

var per_line = 6;

//number of thumbs per column

var per_col = Math.ceil(nmb_thumbs/per_line)

//index of the current thumb

var current = -1;

//mode = grid | single

var mode = 'grid';

//an array with the positions of the thumbs

//we will use it for the navigation in single mode

var positionsArray = [];

for(var i = 0; i < nmb_thumbs; ++i)

positionsArray[i]=i;

//preload all the images

$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',''));

});

//starts the animation

function start(){

$im_loading.hide();

//disperse the thumbs in a grid

disperse();

}

//disperses the thumbs in a grid based on windows dimentions

function disperse(){

if(!flg_click) return;

setflag();

mode = 'grid';

//center point for first thumb along the width of the window

var spaces_w = $(window).width()/(per_line + 1);

//center point for first thumb along the height of the window

var spaces_h = $(window).height()/(per_col + 1);

//let's disperse the thumbs equally on the page

$thumbs.each(function(i){

var $thumb = $(this);

//calculate left and top for each thumb,

//considering how many we want per line

var left = spaces_w*((i%per_line)+1) - $thumb.width()/2;

var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2;

//lets give a random degree to each thumb

var r = Math.floor(Math.random()*41)-20;

/*

now we animate the thumb to its final positions;

we also fade in its image, animate it to 115x115,

and remove any background image of the thumb - this

is not relevant for the first time we call disperse,

but when changing from single to grid mode

*/

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

});

});

}

//controls if we can click on the thumbs or not

//if theres an animation in progress

//we don't want the user to be able to click

function setflag(){

flg_click = !flg_click

}

/*

when we click on a thumb, we want to merge them

and show the full image that was clicked.

we need to animate the thumbs positions in order

to center the final image in the screen. The

image itself is the background image that each thumb

will have (different background positions)

If we are currently seeing the single image,

then we want to disperse the thumbs again,

and with this, showing the thumbs images.

*/

$thumbs.bind('click',function(){

if(!flg_click) return;

setflag();

var $this = $(this);

current = $this.index();

if(mode == 'grid'){

mode = 'single';

//the source of the full image

var image_src = $this.find('img').attr('src').replace('/thumbs','');

$thumbs.each(function(i){

var $thumb = $(this);

var $image = $thumb.find('img');

//first we animate the thumb image

//to fill the thumbs dimentions

$image.stop().animate({

'width' : '100%',

'height' : '100%',

'marginTop' : '0px',

'marginLeft': '0px'

},150,function(){

//calculate the dimentions of the full image

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

/*

set the background image for the thumb

and animate the thumbs postions and rotation

*/

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

//insert navigation for the single mode

if(i==nmb_thumbs-1){

addNavigation();

setflag();

}

});

//fade out the thumb's image

$image.fadeOut(700);

});

});

}

else{

setflag();

//remove navigation

removeNavigation();

//if we are on single mode then disperse the thumbs

disperse();

}

});

//removes the navigation buttons

function removeNavigation(){

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

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

}

//add the navigation buttons

function addNavigation(){

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

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

}

//User clicks next button (single mode)

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

//we want to change each divs background image

//on a different point of time

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;

}

});

//on windows resize call the disperse function

$(window).smartresize(function(){

removeNavigation()

disperse();

});

//function to shuffle an array

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>

jQuery照片墙相册的更多相关文章

  1. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  2. 基于jquery的相册预览gallery

    众多有图片的产品,都要加个图片预览功能.然后市面上就出现了各种各样的相册,下面也提供一个基于jquery的相册. 源码:https://github.com/lilyH/gallery 版本: v0. ...

  3. jQuery美女幻灯相册轮播源代码

    体验效果:http://hovertree.com/texiao/jquery/ 本幻灯片包含小图列表和大图轮播,包含图片标题和详细介绍,详细介绍字数可以很多,每张图片包含链接,可以实现跳转 HTML ...

  4. 8个超炫酷的jQuery相册插件欣赏

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

  5. jquery实现照片墙

    jquery照片墙 由15张图片构成,大致思路:随机生成所有图片-->点击其中一张变为一张大图-->点击大图又变回多张 主要用到jquery实现 先来看看效果 html: <div ...

  6. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  7. 基于jquery垂直缩略图切换相册

    今天给大家分享一款垂直缩略图切换jQuery相册,这是一款垂直缩略图左右滚动切换响应式jQuery图片相册代码.该 插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Oper ...

  8. JS框架_(JQuery.js)图片相册掀开切换效果

    百度云盘 传送门 密码:y0dk 图片掀开切换效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  9. Html 制作相册

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...

随机推荐

  1. java调试打断点和不打断点执行结果不一致问题解决

    java程序在调试的时候需要debug来跟踪一下结果,有一种情况是这样的,正常执行java程序就会出现问题,而断点debug跟踪此方法的时候却是正常的,不断测试结果都是这样,由此判断有可能是因为此方法 ...

  2. mysql numberic types ---- mysql 数值类型详解

    编程语言中大多都有数据类型一说.虽然mysql 的sql 语句与标准sql 有别.但是宏观上看还是差不多的:下面我们说一下mysql数据库中的数值类型 一.在mysql里有那些类型可以表示数值: 1. ...

  3. unity, StartCoroutine and StopCoroutine

    startCoroutine("func",1.0f)可以用stopCoroutine("func")来停. startCoroutine(func(1.0f) ...

  4. android.graphics(2) - Path, drawPath, moveTo, lineTo, addRect, addCircle, addOval, addArc, drawText, drawTextOnPath

    一.创建路径 canvas中绘制路径利用: void drawPath (Path path, Paint paint) 1.直线路径 void moveTo (float x1, float y1) ...

  5. cocos2d-x中的宏定义CC_PROPERTY

    cocos2d-x定义了很多宏定义,帮我们提高开发效率,下面看下CC_PROPERTY, CC_PROPERTY定义 CC_PROPERTY的声明在CCPlatformMacros.h中,结构如下 # ...

  6. java中==和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  7. python 使用pyinstaller，pywin32打包.py成.exe应用程序

    想将编写的Python代码在别人的电脑上运行,由于没有配置python的环境,这就有了困难.搜索学习了下,借助一定的工具可以将python程序的.py文件打包为exe文件,当然有多种方法,本文介绍的方 ...

  8. tornado长轮询

    1.什么是长轮询顾名思义,长轮询就是不停循环请求服务器,获取最新信息.长轮询分为两类:1)浏览器以固定时间间隔向服务器发送请求缺点是轮询频率要足够快,但又不能太频繁,否则当成百上千个客户端不断请求,会 ...

  9. FreeRtos——任务删除，改变任务优先级

    以下转载自安富莱电子: http://forum.armfly.com/forum.php vTaskDelete() API 函数任务可以使用 API 函数 vTaskDelete()删除自己或其它 ...

  10. iframe中子父窗口互调的js方法

    转载自:http://www.cnblogs.com/chinafine/archive/2011/09/15/2177746.html 一.父窗口调用iframe子窗口方法 1.HTML语法:< ...