一款基于jQuery/CSS3实现拼图效果的相册
之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错。当然图片倾斜需要CSS3支持。效果图如下:
实现的代码。
html代码:
<div id="im_wrapper" class="im_wrapper">
<div style="background-position: 0px 0px;">
<img src="data:images/thumbs/1.jpg" alt="" /></div>
<div style="background-position: -125px 0px;">
<img src="data:images/thumbs/2.jpg" alt="" /></div>
<div style="background-position: -250px 0px;">
<img src="data:images/thumbs/3.jpg" alt="" /></div>
<div style="background-position: -375px 0px;">
<img src="data:images/thumbs/4.jpg" alt="" /></div>
<div style="background-position: -500px 0px;">
<img src="data:images/thumbs/5.jpg" alt="" /></div>
<div style="background-position: -625px 0px;">
<img src="data:images/thumbs/6.jpg" alt="" /></div>
<div style="background-position: 0px -125px;">
<img src="data:images/thumbs/7.jpg" alt="" /></div>
<div style="background-position: -125px -125px;">
<img src="data:images/thumbs/8.jpg" alt="" /></div>
<div style="background-position: -250px -125px;">
<img src="data:images/thumbs/9.jpg" alt="" /></div>
<div style="background-position: -375px -125px;">
<img src="data:images/thumbs/10.jpg" alt="" /></div>
<div style="background-position: -500px -125px;">
<img src="data:images/thumbs/11.jpg" alt="" /></div>
<div style="background-position: -625px -125px;">
<img src="data:images/thumbs/12.jpg" alt="" /></div>
<div style="background-position: 0px -250px;">
<img src="data:images/thumbs/13.jpg" alt="" /></div>
<div style="background-position: -125px -250px;">
<img src="data:images/thumbs/14.jpg" alt="" /></div>
<div style="background-position: -250px -250px;">
<img src="data:images/thumbs/15.jpg" alt="" /></div>
<div style="background-position: -375px -250px;">
<img src="data:images/thumbs/16.jpg" alt="" /></div>
<div style="background-position: -500px -250px;">
<img src="data:images/thumbs/17.jpg" alt="" /></div>
<div style="background-position: -625px -250px;">
<img src="data:images/thumbs/18.jpg" alt="" /></div>
<div style="background-position: 0px -375px;">
<img src="data:images/thumbs/19.jpg" alt="" /></div>
<div style="background-position: -125px -375px;">
<img src="data:images/thumbs/20.jpg" alt="" /></div>
<div style="background-position: -250px -375px;">
<img src="data:images/thumbs/21.jpg" alt="" /></div>
<div style="background-position: -375px -375px;">
<img src="data:images/thumbs/22.jpg" alt="" /></div>
<div style="background-position: -500px -375px;">
<img src="data:images/thumbs/23.jpg" alt="" /></div>
<div style="background-position: -625px -375px;">
<img src="data: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>
</div>
js代码:
(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;
};
});
via:http://www.w2bc.com/Article/17969
一款基于jQuery/CSS3实现拼图效果的相册的更多相关文章
- 基于jQuery/CSS3实现拼图效果的相册插件
今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- 一款基于jQuery Ajax的等待效果
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- 基于jQuery+CSS3实现人物跳动特效
分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=& ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 基于jQuery CSS3鼠标点击动画效果
分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="co ...
- 一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览 源码下载 实现的代 ...
- 一款基于jquery和css3的响应式二级导航菜单
今天给大家分享一款基于jquery和css3的响应式二级导航菜单,这款导航是传统的基于顶部,鼠标经过的时候显示二级导航,还采用了当前流行的响应式设计.效果图如下: 在线预览 源码下载 实现的代码. ...
随机推荐
- 【boost】MFC dll中使用boost thread的问题
项目需要,在MFC dll中使用了boost thread(<boost/thread.hpp>),LoadLibraryEx的时候出现断言错误,去掉thread库引用后断言消失. 百度g ...
- Archlinux 踩坑实录
Archlinux 没声音 1. 排查驱动,声卡驱动没问题 2.排查alsa,alsa没问题(并确认声卡存在且取消静音) 3.抱着尝试的心态,安下VLC.然后提示找不到默认声卡设备(大概这个意思),通 ...
- sudo 权限问题
窝里个去,不使用sudo吧rvm requirements执行不成功.加上sudo吧rvm requirements调用的brew install又不行.好吧,就按上面说的将brew转换到root模式 ...
- Node.js V0.12 新特性之性能优化
v0.12悠长的开发周期(已经过去九个月了,并且还在继续,是有史以来最长的一次)让核心团队和贡献者们有充分的机会对性能做一些优化. 本文会介绍其中最值得注意的几个. http://www.infoq. ...
- 提升c++builder 代码输入流畅度的配置
提高c++builder 代码输入流畅度 1.输入指针的函数名后,识别函数参数移动光标到括弧内,此功能太慢,有明显延迟,建议关闭.关闭以后,输入函数名不会自动添加(),需要自己手动输入括弧了,不过速度 ...
- C++ 16进制转10进制
#include <stdio.h>#include <string.h>unsigned long f(char* str){ unsigned long var=0; un ...
- HDU 2100 分类: ACM 2015-06-17 23:49 15人阅读 评论(0) 收藏
Lovekey Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- JSF 2 panelGrid example
In JSF , "h:panelGrid" tag is used to generate HTML table tags to place JSF components in ...
- [翻译]比较ADO.NET中的不同数据访问技术(Performance Comparison:Data Access Techniques)
Performance Comparison: Data Access Techniques Priya DhawanMicrosoft Developer Network January 2002 ...
- 认识position=fixed
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-13) position=fixed是相对于浏览器边框的位置.