本文章介紹了一種比較常用的效果，那就是當(dāng)鼠標(biāo)滑過(guò)鏈接的時(shí)候，能夠出現(xiàn)跟隨鼠標(biāo)指針移動(dòng)的圖層，在實(shí)際應(yīng)用中，一般是對(duì)于鏈接的一些說(shuō)明文字或者圖片等等，下面是代碼實(shí)例:
<!DOCTYPE html><html><head><meta charset="gb2312"><title>VeVb武林網(wǎng)</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 != "") ? "<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" id="theimg" src="/uploads/allimg/160110/2144544510-0.jpg?20160884425" style="border: 1px solid rgb(204, 204, 204); border-image-source: none; vertical-align: bottom; padding: 1px; overflow: hidden; max-width: 650px;" /> 以上代碼實(shí)現(xiàn)了我們的要求，下面簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程:
代碼注釋:
1.this.screenshotPreview=function(){ }，聲明一個(gè)函數(shù)用來(lái)實(shí)現(xiàn)跟隨效果，在本效果中，this其實(shí)是可以省略，它指向window。
2.xOffset=10，聲明一個(gè)變量，用來(lái)規(guī)定鼠標(biāo)指針距離彈出圖片的橫向距離。
3.yOffset=30，聲明一個(gè)變量，用來(lái)規(guī)定鼠標(biāo)指針距離彈出圖片的縱向距離。
4.$("a.screenshot").hover(function(e){}，function(e){})，規(guī)定當(dāng)鼠標(biāo)移到鏈接和離開(kāi)鏈接所要執(zhí)行的函數(shù)。
5.this.t = this.title，將鏈接的title屬性值賦值給t屬性，這里的this是指向當(dāng)前鼠標(biāo)懸浮的鏈接對(duì)象。
6.var c = (this.t != "") ? "<br/>" + this.t : ""，如果this.t不為空，也就是存在title屬性值，那么插入一個(gè)換行符并且連接當(dāng)前標(biāo)題內(nèi)容，否則將c設(shè)置為空。
7.$("body").append("<p id='screenshot'><img src='"+ this.rel +"'/>"+ c +"</p>")，將圖片和相關(guān)說(shuō)明添加到body。
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")，設(shè)置p元素的top和left屬性值，并且采用淡入效果展現(xiàn)。
9.this.title=this.t，將title內(nèi)容賦值給this.title，其實(shí)不要這一句也沒(méi)有任何問(wèn)題，有點(diǎn)多余。
10.$("#screenshot").remove()，移出p元素。
11.$("a.screenshot").mousemove(function(e){}），用來(lái)設(shè)置當(dāng)鼠標(biāo)指針移動(dòng)時(shí)，圖片能夠跟隨。
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset)+"px")，設(shè)置p元素的top和left屬性值，能夠?qū)崿F(xiàn)跟隨效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到JavaScript/Ajax教程頻道。
