网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
jquery.mosaic-elements.js是一个轻量级可配置的jQuery插件,动画显示生成一个砌体(默认)或马赛克(平等的高度)网格风格布局。
使用方法如下:
1. 添加网格mosaic-item到mosaic容器如下:
<div id="mosaic">
<div class="mosaic-item">
Item 1
</div>
<div class="mosaic-item">
Item 2
</div>
<div class="mosaic-item">
Item 3
</div>
...
</div>
2. 引入jquery库和jquery.mosaic-elements.js插件,样式文件
<link rel="stylesheet" href="src/style.css" />
<script src="src/jquery.min.js"></script>
<script src="src/jquery.mosaic-elements.js"></script>
3. 调用插件
$('body').mosaicElements();
4. masonry模式。
$('body').mosaicElements({
// set to false to enable the Mosaic mode
'masonry': true,
// correction for calculating the transition to the next column in the container
'masonry_shift': 0
});
5. 配置动画渲染。
$('body').mosaicElements({
// minimum of rotation from in degree
'rotate_min': -180,
// maximum of rotation to in degree
'rotate_max': 180,
// minimum of duration from in px
'duration_min': 60,
// maximum of duration to in px
'duration_max': 600
});
6. 覆盖默认的父元素与子元素选择器。
$('body').mosaicElements({
'container': '#mosaic',
'elements': '.mosaic-item'
});
转载请注明来源:jquery.mosaic-elements.js网格动画布局插件
本文永久链接地址:https://www.moyouyouw.cn/code/645.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论