jQuery menyedari kesan khas apabila muncul gambar apabila tetikus meluncur ke atasnya

jQuery menyedari kesan khas apabila muncul gambar apabila tetikus meluncur ke atasnya_jquery

WBOY

Lepaskan： 2016-05-16 15:21:08

asal

1366 orang telah melayarinya

Bab ini memperkenalkan kesan yang biasa digunakan, iaitu, apabila tetikus meluncur ke atas pautan, lapisan yang mengikuti pergerakan penunjuk tetikus boleh muncul dalam aplikasi praktikal, ia biasanya beberapa teks penjelasan atau gambar untuk pautan , dsb. Tunggu,

Mari kita lihat gambar demo dahulu

Berikut ialah contoh kod:

<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
	$("a.preview").preview();	 
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>

<body>
<div class="zxx_out_box">
 <div class="zxx_in_box">
  <h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
  <div class="zxx_main_con">
			<div class="zxx_test_list">
   	<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
    	<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
    </a>
    <a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
    	<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
    </a>
   </div>   
  </div>

 </div>
</div>
</body>
</html>

Salin selepas log masuk

Kod di atas telah mencapai keperluan kami, apakah pendapat anda semua?

Seterusnya mari kita lihat penerangan ringkas tentang cara menggunakannya:

1. Anda perlu menggunakan atribut href bagi teg a Prinsip pemalam jQuery ini ialah apabila tetikus bergerak ke lakaran kecil (atau teks pautan), serpihan html imej yang besar mengandungi laluan penunjuk href. akan dimuatkan. Serpihan ini berdasarkan tetikus Kedudukan diposisikan secara mutlak. Ini menghasilkan kesan menggerakkan tetikus ke atas lakaran kecil untuk memaparkan imej yang lebih besar. Alamat imej besar ialah kandungan atribut href bagi teg a. Contohnya: Lakaran kecil Jika teg a mengandungi kaedah untuk memaparkan imej besar, halaman akan memaparkan imej "xx.jpg" yang ditunjuk oleh href.

2. Kaedah yang digunakan ialah: target selector.preview(); . pratonton(); Kod ini melaksanakan kesan memaparkan imej xx.jpg apabila tetikus dialihkan ke pautan teks "Lakaran kecil".

3. Hanya empat format imej, png, gif, jpg dan bmp, disokong Anda boleh mengubah suai ungkapan biasa kod pemalam untuk mengembangkan jenis format imej yang disokong.

Berikut ialah pengenalan ringkas kepada proses pelaksanaan:

1. Komen komen:

1.this.screenshotPreview=function(){ }, mengisytiharkan fungsi untuk melaksanakan kesan berikut Dalam kesan ini, ini sebenarnya boleh ditinggalkan, ia menunjuk ke tetingkap.

2.xOffset=10, isytiharkan pembolehubah untuk menentukan jarak mendatar penuding tetikus daripada imej pop timbul.

3.yOffset=30, isytiharkan pembolehubah untuk menentukan jarak menegak penunjuk tetikus daripada imej pop timbul.

4.$("a.screenshot").hover(function(e){}, function(e){}) menentukan fungsi yang akan dilaksanakan apabila tetikus bergerak ke pautan dan meninggalkan pautan.

5.this.t = this.title, tetapkan nilai atribut tajuk pautan kepada atribut t, di mana ini ialah objek pautan yang menunjuk ke tuding tetikus semasa.

6.var c = (this.t != "") ? kemudian masukkan aksara baris baharu dan gabungkan kandungan pengepala semasa, jika tidak, tetapkan c kepada kosong.

7.$("body").append("

" c "

") , tambahkan gambar dan penerangan berkaitan pada badan.

8.$("#screenshot").css("atas",(e.pageY-xOffset) "px").css("kiri",(e.pageX yOffset) "px").fadeIn( "cepat"), tetapkan nilai atribut atas dan kiri bagi elemen p, dan gunakan kesan fade-in untuk dipaparkan.

9.this.title=this.t, tetapkan kandungan tajuk kepada this.title Sebenarnya tiada masalah tanpa ayat ini, ia agak berlebihan.

10.$("#screenshot").buang(), alih keluar elemen p.

11.$("a.screenshot").mousemove(function(e){}), digunakan untuk menetapkan gambar supaya mengikut apabila penunjuk tetikus bergerak.

12.$("#screenshot").css("atas",(e.pageY-xOffset) "px") .css("kiri",(e.pageX yOffset) "px"), tetapkan p Nilai atribut atas dan kiri elemen boleh mencapai kesan berikut.

2. Bacaan berkaitan:

1. Fungsi hover() boleh didapati dalam bab acara hover jQuery .
2. Untuk fungsi append(), sila rujuk bab kaedah append() jQuery .
3. Untuk fungsi css(), sila rujuk bab kaedah css() jQuery .
4. Untuk atribut pageY, sila rujuk bab atribut jQuery’s event.pageY.
5. Untuk fungsi fadeIn(), sila rujuk bab kaedah fadeIn() jQuery.
6. Untuk fungsi remove(), sila rujuk bab kaedah remove() jQuery .
7. Untuk acara mousemove, sila rujuk bab acara mousemove jQuery .