<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{width: 100px; height: 100px; background: red;position: absolute} </style> <script src="js/jquery.min.js"></script> <script> //$.extend():扩展工具方法下面的插件形式 $.xxx() //$.fn.extend():扩展到JQ对象下的插件形式 $().xx() //去左边空格插件扩展 $.extend({ leftTrim:function (str) { return str.replace(/^\s+/,''); } }); //拖动插件扩展 $.fn.extend({ drag: function () { var disX = 0; var disY = 0; var _this = this; this.mousedown(function (ev) { disX = ev.pageX - $(this).offset().left; disY = ev.pageY - $(this).offset().top; $(document).mousemove(function (ev) { _this.css('left', ev.pageX - disX); _this.css('top', ev.pageY - disY); }); $(document).mouseup(function (ev) { $(this).off(); }); return false; }); } }); </script> <script> /*var str = ' hello '; alert('('+$.leftTrim(str)+')');*/ $(function () { $('#div1').drag(); }); </script> </head> <body> <div id="div1">这个div可以拖动</div> </body> </html>
JQ插件扩展示例
最新推荐文章于 2021-03-16 21:26:56 发布