鼠标停止移动事件

本文介绍了如何在JavaScript中实现对鼠标停止移动时触发的事件进行监听和处理,对于提升网页交互体验有一定帮助。
摘要由CSDN通过智能技术生成
<script src="jquery.js"></script>
<script>
(function($){
	$.fn.moveStopEvent = function(callback){
		return this.each(function() {
			var x = 0,
				y = 0,
				x1 = 0,
				y1 = 0,
				isRun = false,
				si,
				self = this;

			var sif = function(){
				si = setInterval(function(){
									if(x == x1 && y ==y1){
										clearInterval(si);
										isRun = false;
										callback && callback.call(self);
									}
									x = x1;
									y = y1;
								}, 500);
			}

			$(this).mousemove(function(e){
				x1 = e.pageX;
				y1 = e.pageY;
				!isRun && sif(), isRun = true;
			}).mouseout(function(){
				clearInterval(si);
				isRun = false;
			});
	});
	}
})(jQuery);

$(function(){
	$("#div1,#div2").moveStopEvent(functio
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用JavaScript来实现鼠标按住移动的效果。以下是一个简单的示例代码: ```javascript // 获取需要移动的元素 var element = document.getElementById('your-element'); // 记录鼠标按下时的初始位置 var initialX; var initialY; // 监听鼠标按下事件 element.addEventListener('mousedown', function(event) { // 记录鼠标按下时的初始位置 initialX = event.clientX; initialY = event.clientY; // 监听鼠标移动事件 document.addEventListener('mousemove', moveElement); }); // 监听鼠标松开事件 document.addEventListener('mouseup', function() { // 停止监听鼠标移动事件 document.removeEventListener('mousemove', moveElement); }); // 移动元素的函数 function moveElement(event) { // 计算鼠标移动的距离 var deltaX = event.clientX - initialX; var deltaY = event.clientY - initialY; // 更新元素的位置 element.style.left = element.offsetLeft + deltaX + 'px'; element.style.top = element.offsetTop + deltaY + 'px'; // 更新初始位置 initialX = event.clientX; initialY = event.clientY; } ``` 在上述代码中,首先获取需要移动的元素,并监听鼠标按下事件。在鼠标按下事件处理函数中,记录鼠标按下时的初始位置,并添加监听鼠标移动事件的处理函数。在鼠标移动事件处理函数中,计算鼠标移动的距离,并更新元素的位置。当鼠标松开时,停止监听鼠标移动事件。 你可以将上述代码放在页面的 `<script>` 标签中,并将需要移动的元素的 id 替换为你自己的元素 id。这样,当你按住鼠标移动时,该元素就会跟随鼠标移动
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值