Kaedah JQuery untuk menggerakkan tetikus ke imej kecil untuk memaparkan kesan imej_jquery yang besar

Contoh dalam artikel ini menerangkan cara menggunakan JQuery untuk menggerakkan tetikus ke imej kecil untuk memaparkan kesan imej besar. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Fungsi memaparkan gambar besar di sini adalah serupa dengan artikel sebelumnya "Kaedah JQuery untuk melaksanakan kesan gesaan tetikus hiperpautan".

Rujuk kod untuk kesan gesaan hiperpautan sebelumnya, anda hanya perlu menukar kod elemen div yang dibuat kepada:

//创建 div 元素 图片提示
var tooltip = "<div id="tooltip"><img src=""+ this.href +"" alt="预览图"><\/div>"; 
</div>

Apabila tetikus meluncur ke atas gambar, paparan akan mempunyai kesan gesaan gambar yang besar. Untuk menjadikan kesannya lebih berperikemanusiaan, ia juga perlu untuk menambah teks penerangan pada gambar, iaitu, teks pengenalan gambar yang sepadan muncul di bawah gambar besar yang digesa.

Anda boleh mendapatkan teks pengenalan yang sepadan bagi imej berdasarkan nilai atribut tajuk hiperpautan Kod JQuery adalah seperti berikut:

this.myTitle = this.title; 
this.title = "";  
var imgTitle = this.myTitle&#63; "<br />" + this.myTitle : "";

Kemudian tambahkannya pada elemen div dengan kod berikut:

// 创建 div 元素
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; 

Apabila menilai sama ada this.myTitle ialah "", operasi ternary digunakan. Struktur operasi ternary ialah: Boolean Nilai 1: Nilai 2. Parameter pertamanya mestilah nilai Boolean. Sudah tentu, operasi ternary juga boleh digantikan dengan "if(){ }else{ }", contohnya:

var imgTitle; 
if (this.myTitle) { 
  imgTitle = "<br />" + this.myTitle; 
} else { 
  imgTitle = ""; 
}

Dengan cara ini, kesan gesaan gambar selesai Apabila tetikus meluncur ke atas gambar, pratonton besar gambar akan muncul, dan akan terdapat teks pengenalan di bawah gambar besar.

Kod lengkap untuk contoh ini adalah seperti berikut:

<script type="text/javascript">
//<![CDATA[
$(function(){
  var x = 10;
  var y = 20;
  $("a.tooltip").mouseover(function(e){
    this.myTitle = this.title;
    this.title = "";  
    var imgTitle = this.myTitle&#63; "<br/>" + this.myTitle : "";
    var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='预览图'/>"+imgTitle+"<\/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(); //移除 
 }).mousemove(function(e){
    $("#tooltip")
      .css({
        "top": (e.pageY+y) + "px",
        "left": (e.pageX+x) + "px"
      });
  });
})
//]]>
</script>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.