kaedah jquery untuk mencapai spotlight effect_jquery

Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan lampu sorot. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Kadangkala tapak web perlu menggunakan jquery untuk melaksanakan kesan lampu sorot gambar Apabila tetikus meluncur ke atas satu ikon dalam satu kumpulan, ikon semasa diserlahkan dan ikon lain menjadi gelap, serupa dengan kesan lampu sorot gambar. Prinsip pelaksanaan adalah untuk terlebih dahulu membiarkan tetikus menyentuh gambar semasa, membuat semua gambar lain telus, dan kemudian memaparkan gesaan semasa Apabila tetikus dialihkan, gesaan semasa disembunyikan dan ketelusan semua warna latar belakang kembali normal . Berikut ialah pengenalan cara menggunakan jquery untuk mencapai kesan lampu sorot

Rajah kesan lampu sorot yang dilaksanakan oleh jquery adalah seperti berikut:

kod jquery

Salin kod Kod adalah seperti berikut:

   
   
   
   
   
   

');
               self.append(marker);
               self.mouseover(function(){
for(var i=0; i markers[i].show().css({"opacity":'0.2',"filter":alpha(opacity=20)"});
                }
              marker.hide();
             });                                                   markers.push(marker);
        });
          box.mouseout(function(){
for(var i=0; i                 markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});
            }
         })
}
})(this, $);
blockHighLight(
".lamp", //Übergeordnetes Element
".sublight", //Sub-Element-Set
[
'240,366', //Breite und Höhe des ersten Bildes
'480,183', //Breite und Höhe des zweiten Bildes
'240,183', //Breite und Höhe des dritten Bildes
'240,183', //Breite und Höhe des vierten Bildes
'240,183', //Breite und Höhe des fünften Bildes
'240,183' //Die Breite und Höhe des sechsten Bildes
]
);



Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.