cari

Rumah >hujung hadapan web >tutorial js >pautan hover tetikus jQuery pop timbul ikut contoh imej kemahiran code_javascript

pautan hover tetikus jQuery pop timbul ikut contoh imej kemahiran code_javascript

WBOY
WBOYasal
2016-05-16 15:21:101227semak imbas

Artikel 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, berikut ialah contoh kod: 

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>脚本之家</title>
<style type="text/css">
body{
 margin:0;
 padding:40px;
 background:#fff;
 font:80% Arial, Helvetica, sans-serif;
 color:#555;
 line-height:180%;
}
a{
 text-decoration:none;
 color:#f30; 
}
p{
 clear:both;
 margin:0;
 padding:.5em 0;
}
img{border:none;}
#screenshot{
 position:absolute;
 border:1px solid #ccc;
 background:#333;
 padding:5px;
 display:none;
 color:#fff;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
this.screenshotPreview=function(){ 
 xOffset = 10;
 yOffset = 30;
 $("a.screenshot").hover(function(e){
 this.t = this.title;
 var c = (this.t != "") &#63; "<br/>" + this.t : "";
 $("body").append("<p id='screenshot'><img src='"+this.rel+"' />"+c+"</p>");   
 $("#screenshot")
 .css("top",(e.pageY - xOffset) + "px")
 .css("left",(e.pageX + yOffset) + "px")
 .fadeIn("fast");  
 },
 function(){
 this.title = this.t; 
 $("#screenshot").remove();
 }); 
 $("a.screenshot").mousemove(function(e){
 $("#screenshot")
 .css("top",(e.pageY-xOffset)+"px")
 .css("left",(e.pageX+yOffset)+"px");
 }); 
};
$(document).ready(function(){
 screenshotPreview();
});
</script>
</head>
<body>
<a href="#" class="screenshot" title="蚂蚁部落" rel="mytest/demo/thesmall.jpg">蚂蚁部落</a>欢迎您
</body>
</html>

Rendering:

Kod di atas mencapai keperluan kami Berikut ialah pengenalan ringkas kepada proses pelaksanaan:
Ulasan kod:
1.this.screenshotPreview=function(){ }, mengisytiharkan fungsi untuk melaksanakan kesan berikut, ini sebenarnya boleh ditinggalkan, ia menunjuk ke tetingkap.
2.xOffset=10, mengisytiharkan pembolehubah untuk menentukan jarak mendatar penuding tetikus daripada imej pop timbul.
3.yOffset=30, mengisytiharkan pembolehubah untuk menentukan jarak menegak penuding tetikus daripada imej pop timbul.
4.$("a.screenshot").hover(function(e){}, function(e){}), menentukan apabila tetikus bergerak ke pautan dan meninggalkan pautan untuk melaksanakan.
5.this.t = this.title, tetapkan nilai atribut tajuk pautan kepada atribut t, di mana ini ialah penunjuk ke Objek pautan yang sedang dilegar oleh tetikus.
6.var c = (this.t != "") ? Iaitu, jika nilai atribut tajuk wujud, masukkan aksara baris baharu dan sambungkan kandungan tajuk semasa, jika tidak tetapkan c kepada kosong.
7.$("body").append("15918063f12c8a89e603632d0a3ad085bb0d1b54c29fd88a8e8b568dfb04cf65" c "Tambahkan gambar dan penerangan berkaitan pada badan.
8.$("#screenshot").css("atas",(e.pageY-xOffset) "px").css("kiri",(e.pageX yOffset) "px") .fadeIn("fast"), menetapkan nilai atribut atas dan kiri unsur p dan menggunakan 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").remove(), 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") , menetapkan nilai atribut atas dan kiri unsur p untuk mencapai kesan berikut. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

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：Contoh terperinci format data JSON dan kemahiran rentetan medan data format json conversion_javascriptArtikel seterusnya：Contoh terperinci format data JSON dan kemahiran rentetan medan data format json conversion_javascript

Artikel berkaitan

Lihat lagi