纯js和CSS3分散式宝丽来图片画廊

当前位置:主页 > jQuery库 > 图片效果 > 纯js和CSS3分散式宝丽来图片画廊
纯js和CSS3分散式宝丽来图片画廊
分享:

    插件介绍

    polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。该宝丽来图片画廊在初始化时所有图片被分散在屏幕的不同地方,并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-07
    阅读:
麦子学院
简要教程

polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。该宝丽来图片画廊在初始化时所有图片被分散在屏幕的不同地方,并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。

宝丽来图片画廊

使用方法

在页面中引入polaroid-gallery.css和polaroid-gallery.js文件。

<link rel="stylesheet" href="dist/polaroid-gallery.css" type="text/css" /> 
<script src="dist/polaroid-gallery.js"></script>                  
                
HTML结构

使用一个<div>元素作为图片画廊的容器。另外可以为图片画廊添加前后导航按钮。

<div id="gallery" class="fullscreen"></div>
<div id="nav" class="navbar">
    <button id="preview">< 前一张</button>
    <button id="next">下一张 ></button>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过new polaroidGallery()方法来构建一个新的图片画廊对象。

<script>
    window.onload = function () {
        new polaroidGallery();
    }
</script>
                

图片画廊中的图片是通过json数据来进行异步加载的,确保在data文件夹中编写data.json文件,json文件里面存放图片的相对路径。文件的基本格式为:

[
  {
  "name": "img01.jpg", 
  "caption": "图片1"
  },
  {
  "name": "img02.jpg",
  "caption": "图片2"
  }
]                 
                

polaroid-gallery图片画廊插件的github地址为:https://github.com/rymbau/polaroid-gallery

网友评论