插件描述：图片画廊插件polaroid-gallery在初始化时所有图片被分散在屏幕的不同地方，并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。
polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。该宝丽来图片画廊在初始化时所有图片被分散在屏幕的不同地方，并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。
注：此插件需要在服务端运行，本地预览会有跨域问题！
使用方法
在页面中引入polaroid-gallery.css和polaroid-gallery.js文件。
1 2 | <link rel="stylesheet" href="dist/polaroid-gallery.css" type="text/css" /> <script src="dist/polaroid-gallery.js"></script> |
HTML结构
使用一个<div>元素作为图片画廊的容器。另外可以为图片画廊添加前后导航按钮。
1 2 3 4 5 | <div id="gallery" class="fullscreen"></div><div id="nav" class="navbar"> <button id="preview">< 前一张</button> <button id="next">下一张 ></button></div> |
初始化插件
在页面DOM元素加载完毕之后，可以通过new polaroidGallery()方法来构建一个新的图片画廊对象。
1 2 3 4 5 | <script> window.onload = function () { new polaroidGallery(); }</script> |
图片画廊中的图片是通过json数据来进行异步加载的，确保在data文件夹中编写data.json文件，json文件里面存放图片的相对路径。文件的基本格式为：
1 2 3 4 5 6 7 8 9 10 | [ { "name": "img01.jpg", "caption": "图片1" }, { "name": "img02.jpg", "caption": "图片2" }] |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 移动端app原生标准选项卡
- 下一个特效： 4种不同风格的tab切换