pautan hover tetikus jQuery pop timbul ikut contoh imej kemahiran code

pautan hover tetikus jQuery pop timbul ikut contoh imej kemahiran code_javascript

WBOY

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

asal

1162 orang telah melayarinya

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>

Salin selepas log masuk

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("

" 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.