怎么使用jquery实现鼠标停止移动事件
怎么使用jquery实现鼠标停止移动事件
学习啦在线学习网 学习前端的同学你们知道怎么使用js实现鼠标停止移动事件吗?不知道的话跟着学习啦小编一起来学习如何实现鼠标停止移动事件。
jquery实现鼠标停止移动事件的方法
代码如下:
<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(function(){
alert($(this).attr("id"));
}
);
});
</script>
<div id="div1" style="width:200px;height:100px;background-color:#ccc;">div1</div>
学习啦在线学习网 <br/>
学习啦在线学习网 <div id="div2" style="width:200px;height:100px;background-color:#ccc;">div2</div>
jquery实现鼠标停止移动事件相关文章：
3.鼠标事件属性详解