keleyi.com 柯乐义
效果体验：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 ImageWall照片墙相册特效的实现与解析》 在网页设计中，吸引用户注意力并提供良好用户体验的元素至关重要。jQuery ImageWall照片墙相册特效正是这样一种工具，它以其独特的图片展示方式，使网页的视觉效果...
jQuery 照片墙是一种常见的网页设计元素，它能够以美观、交互性强的方式展示一组图片，常用于网站的相册或作品展示区域。通过利用 jQuery 库的强大功能，我们可以轻松创建动态效果，如平滑滚动、淡入淡出、网格布局...
【标题】"艺术风格的jQuery照片墙特效代码"是一个网页设计技术的应用实例，它结合了艺术元素和jQuery库，创建出一种独特的展示照片的方式。这种特效通常用于在线艺术画廊、个人作品集或者产品展示网站，能带给用户...
首先，"jQuery照片墙小图合成大图动画代码.zip"的标题表明这是一个使用jQuery库实现的代码示例，其核心功能是通过用户交互（点击）将照片墙上的小图片合并成一个大图，同时伴随着动画效果。jQuery是一个广泛使用的...
"jQuery照片墙特效代码"是一种常见的网页设计技术，主要用于创建具有视觉吸引力的图像展示区域，让用户在浏览网页时能够以网格或不规则布局的方式查看图片。这种特效在网站的首页、产品展示、相册等场景中广泛应用，...
今天我们要给大家分享一款非常个性化的照片墙，它的特点是我们可以将照片随意的陈列在桌面上，可以是不同的摆放角度；另外一个特点是图片的边框是邮票样式的，一张张图片就像漂亮的邮票一样，而且鼠标滑过图片时，...
【jQuery自动播放的照片墙特效】是一种使用JavaScript库jQuery创建的互动网页元素，它为网站带来了生动的视觉体验。照片墙通常包含多个小图像，这些图像可以以网格布局展示，当用户交互或设置自动播放时，这些图像会...
【jQuery水平滑块拖动照片墙】是一种常见的网页交互元素，用于展示一组图片，通过水平滑动的方式增强用户体验，提供了一种动态且直观的方式来浏览多张照片。这种效果结合了jQuery库的高效性能和易用性，使得创建这样...
【jQuery全页照片墙画廊】是一个利用JavaScript库jQuery实现的网页动态效果，主要用于展示图片集，形成一种类似实体画廊的视觉体验。这个技术在现代网页设计中被广泛应用，为用户提供了丰富的交互性和视觉吸引力。 ...
本文将深入探讨如何使用jQuery和HTML5创建一个超炫的相册图片打开动画特效，以及相关的知识点。 首先，jQuery是一个JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画设计。它提供了丰富的API，使得...
【jQuery CSS3实现的照片墙展示】是一个典型的网页交互效果，主要结合了JavaScript库jQuery与CSS3的技术，用于创建视觉上吸引人的图片展示区域，通常被称为照片墙或画廊。这种效果能够以美观且动态的方式组织和展示...
【超酷CSS3相册照片墙动画特效】是一种利用现代Web技术实现的创新视觉效果，主要依赖于CSS3的强大功能，特别是transform属性。这个特效为网页设计师提供了展示图像集的新方式，通过动态变换和交互性增强用户体验。在...
3. **jquery照片墙.zip**：此文件可能包含一个实现“照片墙”效果的jQuery插件。照片墙效果通常是将图片以不规则的大小和位置排列，形成一种富有创意的展示方式。用户可以点击单个图片进行放大查看。 4. **可自动...
在这个项目中，JavaScript库如jQuery或Vanilla JS可能会被用来处理用户交互，例如点击、滑动事件，以及图片的加载和动画效果。可能还使用了像GSAP（GreenSock Animation Platform）这样的高级动画库来实现流畅的过渡...
这种技术主要依赖于JavaScript（JS）来实现，尤其是前端框架和库如jQuery或Vue.js等，它们提供了丰富的功能和API用于操作DOM元素，实现动态布局和交互。 【描述】"照片墙效果一多实例 (可随机排序)" 描述了这个...
6. **前端技术**：HTML、CSS和JavaScript构建用户界面，可能用到Bootstrap、jQuery等库。 7. **分页技术**：处理大量图片时，需要实现分页功能，提高页面加载速度。 8. **性能优化**：如缓存机制（如Redis或...
这种特效通过创建一个中间显示大图，两侧展示模糊处理的小图的效果，来提升用户体验，使得图片相册的视觉效果更具吸引力。下面将详细解析这个特效的关键知识点。 1. **jQuery库**：jQuery是一个广泛使用的...
【纯js超炫酷3D照片墙展示特效.zip】是一个包含JavaScript实现的创新性3D照片墙展示项目，特别适合用于网站的图片相册展示。这个特效不仅视觉效果出众，而且具备良好的兼容性和响应性，使得它能在包括IE8在内的各种...
标题中的“10个免费的jQuery相册”指的是在Web开发中使用jQuery库创建的10款独特且具有创新设计的相册插件。这些相册不仅提供了基本的图片展示功能，还具备优雅的动画效果和用户体验优化。jQuery是一种广泛使用的...
总结来说，"纯js超炫酷3D照片墙展示特效"是一项结合了JavaScript、WebGL、CSS3D Transform、响应式设计和jQuery技术的综合应用，旨在为用户提供一个交互性好、视觉冲击力强的图片展示平台。通过合理利用这些技术，...