插件描述：Magnet.js是一个JavaScript库。它可以是实现DOM元素的拖拽、分组并使它们相互吸引,非常强大。
更新时间：2020-02-26 23:38:51
Magnet.js
Magnet.js是一个JavaScript库，可对HTML元素进行分组并使它们相互吸引
jQuery version
配置磁铁吸引距离
切换为留在父元素中
与其他的外边缘/内边缘对齐
与其他x / y中心对齐
与父元素的x / y中心对齐
使用方法
在html页面中添加magnet.min.js
1 2 3 4 5 | <!-- include script --><script src="PATH/TO/magnet.min.js"></script><script> console.log(window.Magnet); // here it is</script> |
jQuery插件
注意：在包含jquery-magnet.min.js之前，请包括jQuery库
1 2 3 4 5 6 7 | <script src="PATH/TO/jQuery.js"></script><script src="PATH/TO/jquery-magnet.min.js"></script><script> (function($) { console.log($.magnet); // here it is })(jQuery);</script> |
创建磁组
创建一个磁铁组。添加到组中的所有元素都将应用吸引行为。
1 | let magnet = new Magnet(); |
jQuery建立新群组
$.magnet(options?)
1 2 3 4 5 | let options = { distance: 15, stayInParent: true,};let $magnet = $.magnet(options); |
添加元素
将HTML元素添加到组中
.add（... DOMs）
1 | magnet.add(document.querySelectorAll('.magnet')); //返回 |
或在创建组时添加HTML元素
let magnet = new Magnet(document.querySelectorAll('.magnet'));
灵活的添加元素的方式
1 2 3 4 5 | magnet.add( document.querySelectorAll('.magnet'), document.querySelectorAll('.other-magnet'), document.getElementById('major-magnet')); |
//与上面相同
1 2 3 4 | magnet .add(document.querySelectorAll('.magnet')) .add(document.querySelectorAll('.other-magnet')) .add(document.getElementById('major-magnet')); |
jQuery
$magnet.add(…DOMs)
将元素添加到现有组
$.fn.magnet(options?)
将元素添加到新组
1 | let $magnet = $('.magnet').magnet(options); |
删除元素
从组中删除HTML元素
1 | .remove(…DOMs) |
保持位置被磁铁改变
1 | magnet.remove(document.querySelector('.magnet')); // return this |
灵活的删除元素的方法
1 2 3 4 5 | magnet.remove( document.querySelectorAll('.magnet'), document.querySelectorAll('.other-magnet'), document.getElementById('major-magnet')); |
//与上面相同
1 2 3 4 | magnet .remove(document.querySelectorAll('.magnet')) .remove(document.querySelectorAll('.other-magnet')) .remove(document.getElementById('major-magnet')); |
jQuery
1 2 | $magnet.remove(…DOMs)$magnet.removeFull(…DOMs) |
清除所有元素
从组中删除所有HTML元素
.clear()
保持位置被磁铁改变
1 | magnet.clear(); |
.clearFull()
移开磁铁改变的位置
1 | magnet.clearFull(); |
jQuery
1 2 | $magnet.clear()$magnet.clearFull() |
景点距离
元素吸引同一组其他对象的距离
1 | Default: 0 (px) |
.distance(px?)
获取/设置距离
1 2 | magnet.distance(15); // 设置：单位px，返回magnet.distance(); // 得到：15 |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 网站常用底部布局代码
- 下一个特效： app美食点餐模板