最新资源
简介
svg-popup.js是一个轻量级、可定制、响应迅速、美观的jQuery模式窗口插件，它提供了基于svg形状的非常棒的粒子（五彩纸屑）打开/关闭动画。
请参阅实际操作：
如何使用它:
1.在文档中加载最新的jQuery库和svg-popup.js插件的文件。
<link rel="stylesheet" href="/path/to/js/jQuery-svg-popup-min.css"> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/js/jQuery-svg-popup-min.js"></script>
2.将模态内容插入到具有唯一ID的DIV容器中。
<div id="example">
<div class="svg-popup-content">
<h3>Modal Window</h3>
<p>This Is A Modal Window</p>
</div>
</div>
3.在页面上创建一个切换按钮，并在数据svg弹出窗口属性
<button type="button" class="toggle-button" data-svg-popup="example"> Launch The Modal </button>
4.在切换按钮上初始化插件并完成。
$('.toggle-button').svgpopup({
// options here
});
5.配置模态和粒子动画。
$('.toggle-button').svgpopup({
// number of particles
stepX: 12,
stepY: 12,
// fill colors
fill: '#03BDD6',
fillOdd: null,
fillEven: null,
// stroke color
strokeFill: null,
// opacity
opacity: 0.8,
// animation speed
speed: 1.8,
// 'triangle', 'rectangle'
figure: 'triangle',
// shows unordered particles on page load
visible: false,
// randomize particles
randomize: true,
// text for close button
closeButtonText: '✖',
// width & height of the modal window
width: $(window).width(),
height: $(window).height(),
});
6.动画完成后触发一个函数。
$('.toggle-button').svgpopup({
onAnimationComplate: function(){
// do something
}
});
预览截图
带粒子动画 花式模式窗口 jQuery svg popup.js