ホームページ >ウェブフロントエンド >jsチュートリアル >jquery はマウス ポインターのストップ モーションをシミュレートします。
jquery はマウス ポインターのストップ モーションをシミュレートします。
- WBOYオリジナル
- 2016-05-16 15:20:281294ブラウズ
この記事の例は、マウスポインタの動きの停止によってトリガーされるイベントのサンプルコードを説明しています。具体的な内容は次のとおりです。
js には、click イベント、mousemove イベントなど、さまざまな組み込みのマウス イベントがありますが、マウス ポインタの移動が停止するイベントはありません。この効果をシミュレートするために jquery を使用してみましょう。助けが必要な友達。
コードは次のとおりです:
<html>
<head>
<meta charset="gb2312">
<title>鼠标指针停止运动</title>
<style type="text/css">
#top
{
width:200px;
height:100px;
background-color:#ccc;
}
#bottom
{
width:200px;
height:100px;
background-color:#ccc;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
(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(){
$("#top,#bottom").moveStopEvent(function(){
alert($(this).attr("id"));
})
})
</script>
</head>
<body>
<div id="top">脚本之家一</div>
<br/>
<div id="bottom">脚本之家二</div>
</body>
</html>
上記のコードは、div 内でマウス ポインターの移動が停止すると、対応する div の id 属性値がポップアップします。その実装プロセスを紹介します。
コードのコメント:
1.(function($){}(jQuery)、匿名関数を宣言し、この関数を実行します。パラメータは jQuery オブジェクトです。
2.$.fn.moveStopEvent=function(callback{})、jQuery インスタンス オブジェクトに関数を追加します。
3.this.each(function(){}) を返し、jQuery オブジェクト コレクション内の各 DOM 要素オブジェクトを走査し、このオブジェクトをコンテキストとして使用して関数を実行します。これは、関数内の this が各 DOM オブジェクトを指すことを意味します。 。
4.var x=0,y=0、変数 x と y を宣言し、初期値を 0 に割り当てます。これらは、マウス ポインターの以前の座標を保存するために使用されます。
5.var x1=0、y1=0、変数 x1 と y1 を宣言し、初期値を 0 に割り当てます。これらは、マウス ポインターの現在の座標を保存するために使用されます。
6.var isRun = false、マウスポインタが動いているかどうかを示すマークを宣言します。
7.var timer=null、タイマー関数の戻り値としてマークを宣言します。
8.var self=this、現在の DOM オブジェクトの参照を self 変数に割り当てます。
9.var sif=function(){} は、マウス ポインタの動きが停止したかどうかを判断する関数を宣言します。
10.timer=setInterval(function(){},500)、500 ミリ秒ごとに関数を実行します。マウス ポインタの位置が 500 ミリ秒以内に変化しない場合、マウス ポインタは移動を停止したとみなされます。
11.x = x1、y = y1、マウス ポインタの現在の座標を x と y に保存します。
12.$(this).mousemove(function(e){})、現在のオブジェクトのmousemoveイベント処理関数を登録します。
13.x1 = e.pageX、マウス ポインターの現在の横座標を x1 に保存します。
14.y1 = e.pageY、現在のマウス座標を y1 に保存します。
15.!isRun && sif()、isRun = true、現在のマウスが動いていない場合は、sif() 関数を実行し、isRun を true に設定します。つまり、マウス ポインタが動き続ける場合、sif() 関数は 1 回だけ実行されることが保証されます。そうでない場合は、これらの関数の多くが実行される可能性があります。
16.mouseout(function(){}) は、mouseout イベント処理関数を登録します。もちろん、これはチェーン呼び出しです。
17.clearInterval(timer)、タイマー関数の実行を停止します。
18.isRun = false、変数の値を false に設定し、マウスの動きが停止したことを示します。
上記はこの記事の全内容であり、詳細なコード コメントがマウス イベントの学習に役立つことを願っています。