基于jQuery/CSS3实现拼图效果的相册插件

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

在线预览   源码下载

实现的代码。

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

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

时间: 2024-10-13 03:23:42

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

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

之前为大家介绍了 HTML5 3D立体图片相册, HTML5图片相册重力感应特效, 基于CSS3图片可倾斜摆放的动画相册 今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="im_wrapper" class="im

jquery + css 特效 之 一款基于jQuery/CSS3实现拼图效果的相册

今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图片倾斜需要CSS3支持.效果图如下: 本章主要参照了如下文章进行学习 jquery:http://www.itmmd.com/tag/jquery.html jQuery教程(31)-jQuery插件开发之全局函数插件 jQuery教程(30)-jQuery插件开发之自定义选择符 jQuery教程(

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

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

Image Wall - jQuery &amp; CSS3 图片墙效果

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示     下载源码 您可能感兴趣的相关文章 充满想象力的 JavaScript 物理和重力实验 精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效

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

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

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

分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="charector-wrap " id="js_wrap"> <div class="charector"> </div> </div> <a class="run-xfast" h

基于jQuery Tooltips悬停提示效果

基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section id="facebook" style=" width:700px; margin:auto;"> <ul> <a href="http://www.w2bc.com/&quo

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

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

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

给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <!-- 代码 开始 --> <div id="header"> <div class="wrap"> <div id="slide-holder&q