基于jQuery/CSS3实现拼图效果的相册插件
2023-09-27 14:28:19 时间
今天我们要来分享一款很酷的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>
相关文章
- Jquery/AJAX实现三级联动
- jquery:上传文件
- JQuery判断数组中是否包含某个元素$.inArray("元素字符串", 数组名称);
- 【前端性能】必须要掌握的原生JS实现JQuery
- jquery表单提交的新写法
- JQuery File Upload 插件 出现 “empty file upload result” 错误的解决方案。
- jquery+css3实现网页背景花瓣随机飘落特效【转】
- Image Wall - jQuery & CSS3 图片墙效果
- 使用 jQuery & CSS3 实现优雅的手风琴效果
- 使用 jQuery & CSS3 实现翻转的作品集滑块
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
- 基于jquery的侧边栏分享导航
- 一款基于css3和jquery实现的动画弹出层
- jquery写日期选择器
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
- Lazy Load Plugin for jQuery延迟加载测试成功