Rumah >hujung hadapan web >tutorial js >jquery mensimulasikan penunjuk tetikus stop motion event_jquery

jquery mensimulasikan penunjuk tetikus stop motion event_jquery

WBOYasal: 2016-05-16 15:20:281298semak imbas

Contoh dalam artikel ini menerangkan contoh kod peristiwa yang dicetuskan oleh pergerakan penunjuk tetikus. Ia dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut Terdapat pelbagai acara tetikus terbina dalam dalam js, seperti acara klik, acara gerakan tetikus, dsb., tetapi tiada peristiwa yang penunjuk tetikus berhenti bergerak Mari gunakan jquery untuk mensimulasikan kesan ini kawan-kawan yang memerlukan bantuan.
Kodnya adalah seperti berikut:

<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>

Kod di atas merealisasikan keperluan kami Apabila penunjuk tetikus berhenti bergerak dalam div, nilai atribut id bagi div yang sepadan Berikut ialah pengenalan kepada proses pelaksanaannya.

Ulasan kod: 1.(function($){}(jQuery), isytiharkan fungsi tanpa nama dan laksanakan fungsi ini. Parameter ialah objek jQuery.
2.$.fn.moveStopEvent=function(panggilan balik{}), tambahkan fungsi pada objek contoh jQuery.
3.kembali this.each(function(){}), melintasi setiap objek elemen DOM dalam koleksi objek jQuery dan gunakan objek ini sebagai konteks untuk melaksanakan fungsi, yang bermaksud bahawa ini dalam fungsi menghala ke setiap objek DOM. .
4.var x=0,y=0, isytiharkan pembolehubah x dan y dan tetapkan nilai awal kepada 0, yang digunakan untuk menyimpan koordinat sebelumnya penuding tetikus.
5.var x1=0, y1=0, isytiharkan pembolehubah x1 dan y1 dan tetapkan nilai awal kepada 0, yang digunakan untuk menyimpan koordinat semasa penuding tetikus.
6.var isRun = false, mengisytiharkan tanda yang menunjukkan sama ada penuding tetikus sedang bergerak.
7.var timer=null, isytiharkan tanda sebagai nilai pulangan bagi fungsi pemasa.
8.var self=this, tetapkan rujukan objek DOM semasa kepada pembolehubah diri.
9.var sif=function(){}, mengisytiharkan fungsi untuk menentukan sama ada penuding tetikus berhenti bergerak.
10.timer=setInterval(function(){},500), jalankan fungsi setiap 500 milisaat Jika penunjuk tetikus tidak menukar kedudukannya dalam masa 500 milisaat, ia dianggap telah berhenti bergerak.
11.x = x1, y = y1, simpan koordinat semasa penuding tetikus ke dalam x dan y.
12.$(this).mousemove(function(e){}), daftarkan fungsi pemprosesan acara mousemove untuk objek semasa.
13.x1 = e.pageX, simpan absis semasa penuding tetikus ke dalam x1.
14.y1 = e.pageY, simpan ordinat tetikus semasa ke dalam y1.
15.!isRun && sif(), isRun = true, jika tetikus semasa tidak bergerak, maka laksanakan fungsi sif() dan tetapkan isRun kepada true. Maksudnya, apabila penunjuk tetikus terus bergerak, ia dijamin bahawa fungsi sif() hanya akan dilaksanakan sekali, jika tidak banyak fungsi ini boleh dilaksanakan.
16.mouseout(function(){}) mendaftarkan fungsi pemprosesan acara mouseout Sudah tentu, ini ialah panggilan berantai yang digunakan.
17.clearInterval(pemasa), menghentikan perjalanan fungsi pemasa.
18.isRun = false, tetapkan nilai pembolehubah kepada false, menunjukkan bahawa tetikus telah berhenti bergerak.

Di atas adalah keseluruhan kandungan artikel ini, dengan ulasan kod terperinci saya harap ia akan membantu semua orang untuk mempelajari acara tetikus.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menganalisis susunan penyemak imbas melaksanakan pemuatan skrip JavaScript dan kemahiran execution_javascript kodArtikel seterusnya：Menganalisis susunan penyemak imbas melaksanakan pemuatan skrip JavaScript dan kemahiran execution_javascript kod

Artikel berkaitan

Lihat lagi