今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错。当然图片倾斜需要CSS3支持。

在线预览   源码下载

实现的代码。

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

via:http://www.w2bc.com/Article/31299

基于jQuery/CSS3实现拼图效果的相册插件的更多相关文章

  1. 一款基于jQuery/CSS3实现拼图效果的相册

    之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度 ...

  2. 基于jQuery CSS3鼠标点击动画效果

    分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  3. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  4. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  5. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  6. 基于jQuery+CSS3实现人物跳动特效

    分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=& ...

  7. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  8. 基于jQuery标题有打字效果的焦点图

    给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...

  9. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

随机推荐

  1. php-fpm 日志

    1.php-fpm 错误日志 #默认位置 安装目录下的 log/php-fpm.log error_log = log/php-fpm.log #错误级别 alert(必须立即处理), error(错 ...

  2. LR函数基础(二)

    (一)用到的函数: (1) web_set_option()   //重定向设置 (2)web_reg_save_param和custom_request都常于处理参数的动态生成. web_reg_s ...

  3. CSS3饼状loading效果

    概述 之前看到很多饼状loading效果是用图片的方式实现的,本例子采用的是纯CSS3实现,这样可以节省资源空间,有兴趣的小伙伴可以看下~ 详细 代码下载:http://www.demodashi.c ...

  4. Apache Hadoop 3.0新版本介绍及未来发展方向

    过去十年,Apache Hadoop从无到有,从理论概念演变到如今支撑起若干全球最大的生产集群.接下来的十年,Hadoop将继续壮大,并发展支撑新一轮的更大规模.高效和稳定的集群. 我们此次将向大家全 ...

  5. result_charts

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  6. 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  7. Xshell和Xftp5配置连接阿里云服务器

    配置Xftp5 配置成功后 配置Xshell 记住用户名和密码 连接成功

  8. 网络工程实训_4RIP路由(动态路由)

    实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向 ...

  9. CentOS 6.7下配置 yum 安装 Nginx。

    第一步,在/etc/yum.repos.d/目录下创建一个源配置文件nginx.repo: cd /etc/yum.repos.d/ vim nginx.repo 填写如下内容: [nginx]nam ...

  10. mongodb win7 32位系统安装以及配置

    今天安装 win7 32位系统 mongodb 费了好大劲..记录一下,希望相同的同学可以少踩点坑. 1.安装 我安装的是3.2.4  地址:http://downloads.mongodb.org/ ...