Kaedah JQuery untuk mencapai effect_jquery gesaan tetikus hiperpautan

Contoh dalam artikel ini menerangkan cara JQuery melaksanakan kesan gesaan tetikus hiperpautan. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Pelayar sebenarnya sudah disertakan dengan gesaan hiperpautan Anda hanya perlu menambah atribut tajuk pada hiperpautan. Walau bagaimanapun, kelajuan tindak balas kesan segera ini sangat perlahan, dengan kelewatan kira-kira 1 saat. Apa yang kita perlukan sekarang ialah mendapatkan gesaan apabila tetikus bergerak ke hiperpautan. Pada masa ini, anda perlu mengalih keluar kesan gesaan tajuk dalam teg dan membuat gesaan dengan fungsi yang serupa sendiri.

Reka bentuk HTML adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

Selamat Datang ke Rumah Skrip

Kemudian tambahkan acara alih tetikus dan keluar tetikus untuk hiperpautan dengan petua alat kelas:

$("a.tooltip").mouseover(function (){  
    //显示 title  
}).mouseout(function (){  
    //隐藏 title  
});

Idea khusus untuk mencapai kesan ini adalah seperti berikut:

1. Apabila tetikus meluncur ke hiperpautan, cipta elemen div dan kandungan elemen div ialah nilai atribut tajuk. Elemen yang dicipta kemudiannya dilampirkan pada dokumen. Tetapkan koordinat x dan y untuknya supaya ia dipaparkan bersebelahan dengan kedudukan tetikus.
2. Apabila tetikus meluncur keluar dari hiperpautan, keluarkan elemen div.

Mengikut idea analisis, tulis kod JQuery berikut:

$(function(){  
  var x = 10;   
  var y = 20;  
  $("a.tooltip").mouseover(function(e){  
    this.myTitle = this.title;  
    this.title = "";    
    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
    //创建 div 元素  
    $("body").append(tooltip); //把它追加到文档中  
    $("#tooltip")  
      .css({  
        "top": (e.pageY + y) + "px",  
        "left": (e.pageX + x) + "px" 
      }).show("fast"); //设置x坐标和y坐标，并且显示  
  }).mouseout(function(){    
    this.title = this.myTitle;  
    $("#tooltip").remove(); //移除  
  });  
});

Terdapat dua masalah dengan kesan pada masa ini: pertama, apabila tetikus meluncur ke atas, gesaan atribut tajuk dalam teg juga akan muncul, kedua, masalah menetapkan koordinat x dan y, disebabkan kepada jarak antara gesaan yang dibuat sendiri dan tetikus Terlalu dekat kadangkala boleh menyebabkan masalah seperti tidak dapat menggesa (perubahan fokus tetikus menyebabkan peristiwa keluar tetikus).

Untuk mengalih keluar fungsi gesaan tajuk dalam teg, anda perlu melakukan langkah berikut:

1. Apabila tetikus meluncur masuk, tambahkan atribut baharu pada objek, hantarkan nilai tajuk kepada atribut ini, dan kemudian kosongkan nilai tajuk atribut.

this.myTitle = this.title;  
s.title = "";   
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>";
//创建 div 元素

2. Apabila tetikus meluncur keluar, nilai atribut myTitle objek diberikan kepada tajuk atribut.

Salin kod Kod adalah seperti berikut:

this.title = this.myTitle;

Mengapakah nilai atribut harus diberikan kepada tajuk atribut apabila tetikus meluncur keluar? Kerana apabila tetikus meluncur keluar, nilai tajuk atribut semasa meluncur masuk semula perlu dipertimbangkan Jika nilai myTitle tidak ditetapkan semula kepada atribut tajuk, apabila tetikus meluncur masuk semula, nilai tajuk akan kosong.

Untuk menyelesaikan masalah kedua, anda perlu menetapkan semula nilai atas dan kiri unsur gesaan Kod adalah seperti berikut, menambah 10px ke atas dan 20px ke kiri:

var x = lO;  
var y = 20;  
$("#tooltip").css({  
    "top": (e.pageY+y) + "px",  
    "left": (e.pageX+x) + "px" 
});

OK, masalah diselesaikan di sini, dan kesan gesaan hiperpautan tetikus direalisasikan.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.