背景平铺的幻灯片插件FourBoxes

 查看演示  website  立即下载

请注意本插件将使用非常现代的CSS 属性，所以想要的效果将只是工作在最新的浏览器版本。

使用方法

引用所需要的样式

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

以及所需要的js文件

<script src="js/classie.js"></script>
<script src="js/boxesFx.js"></script>
<script src="js/modernizr.custom.js"></script>

html结构

<div id="boxgallery" class="boxgallery" data-effect="effect-1">
    <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
    <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
    <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
    <div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

调用插件

<script>
new BoxesFx( document.getElementById( 'boxgallery' ) );
</script>

PREVIOUS:
NEXT:
jquery灯箱画廊插件lightgallery
jQuery布局插件GridManager