image-jigsaw 实现图片分割效果

image-jigsaw 是javascipt插件,可是实现多行多列的简单分割。

image-jiasaw实现原理为寻找<div>的子标签<img>，然后将原来的img style.display 属性设置为none, 效果是不显示原来标签，并在原来位置替换为多个<div>标签。

image-jiasaw 依赖于"class=panel"的标签，定义了jigsaw方法。所以只要找到 class =panel的类，便可以调用jigsaw()方法。

官网示例脚本内容如下：

<script src="js/jquery.js"></script>
<script src="js/img.js"></script>
<script>
    $(".panel").jigsaw({freq: 2000, x: 4, y: 4, margin: 2});
</script>

当然你也可以自定义Jquery语句来定位div标签，例如：

$('div#camera.panel').jiagsaw({freq:2000,x:4,y:4,margin:2});

寻找id="camera" 的标签，调用jigsaw.

其中jigsaw的输入参数，官网给予如下解释：