jquery扩展插件

最新推荐文章于 2022-04-30 18:11:49 发布

RecordInLife

最新推荐文章于 2022-04-30 18:11:49 发布

阅读量369

点赞数

分类专栏： jquery javascript

本文链接：https://blog.csdn.net/itzhengmaolin/article/details/76719104

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery扩展插件</title>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<style type="text/css">
		div{width:100px;height: 100px;background-color: red;position: absolute;}
	</style>
</head>
<body>
<!-- 扩展插件就是本身库没有的方法，需要自己写或者调用其他的方法 -->
<div id="id1"></div>
<script type="text/javascript">
//该方法是扩展工具方法下的插件形式。访问形式为$.leftTrim(str)
$.extend({
	leftTrim:function(str){
		//去除字符串的左空格
		return str.replace(/^\s+/,'');
	}
})
// alert("("+$.leftTrim("  hahha  ")+")");

$.fn.extend({
	drag:function(){
		//该函数里的this指向调用drag函数的那个对象
		var disX=0;
		var disY=0;
		var This=this;
		this.mousedown(function(ev){
			console.log(ev);
			// 鼠标点击时产生的对象ev
			//鼠标离div的左边的距离
			disX=ev.pageX-$(this).offset().left;
			//鼠标离div的上边的距离
			disY=ev.pageY-$(this).offset().top;

			//div产生鼠标移动事件,只是没有相应的事件操作函数，由于冒泡会传给上级元素，所以会触发文档的鼠标移动事件
			$(document).mousemove(function(ev){
				This.css('left',ev.pageX-disX);
				This.css('top',ev.pageY-disY);
			});

			$(document).mouseup(function(){
				//删除事件
				$(this).off();
			});

			return false;
		})
	}
});
//jquery对象中没有drag方法。我们想通过插件形式实现拖拽的方法
$("#id1").drag();
</script>
</body>
</html>

RecordInLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery扩展插件

jquery扩展插件 div{width:100px;height: 100px;background-color: red;position: absolute;} 扩展插件就是本身库没有的方法，需要自己写或者调用其他的方法 -->//该方法是扩展工具方法下的插件形式。访问形式为$.leftTrim(str)$.extend({ leftTrim:function
复制链接

扫一扫

专栏目录