jQuery實(shí)現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效_jquery

2.xOffset=10，聲明一個(gè)變量，用來規(guī)定鼠標(biāo)指針距離彈出圖片的橫向距離。


3.yOffset=30，聲明一個(gè)變量，用來規(guī)定鼠標(biāo)指針距離彈出圖片的縱向距離。


4.$("a.screenshot").hover(function(e){}，function(e){})，規(guī)定當(dāng)鼠標(biāo)移到鏈接和離開鏈接所要執(zhí)行的函數(shù)。


5.this.t = this.title，將鏈接的title屬性值賦值給t屬性，這里的this是指向當(dāng)前鼠標(biāo)懸浮的鏈接對象。


6.var c = (this.t != "") ? "
" + this.t : ""，如果this.t不為空，也就是存在title屬性值，那么插入一個(gè)換行符并且連接當(dāng)前標(biāo)題內(nèi)容，否則將c設(shè)置為空。


7.$("body").append("
"+ c +"
")，將圖片和相關(guān)說明添加到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í)不要這一句也沒有任何問題，有點(diǎn)多余。


10.$("#screenshot").remove()，移出p元素。


11.$("a.screenshot").mousemove(function(e){}），用來設(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)跟隨效果。


二.相關(guān)閱讀:


1.hover()函數(shù)可以參閱jQuery的hover事件一章節(jié)。

2.append()函數(shù)可以參閱jQuery的append()方法一章節(jié)。 

3.css()函數(shù)可以參閱jQuery的css()方法一章節(jié)。

4.pageY屬性可以參閱jQuery的event.pageY屬性一章節(jié)。

5.fadeIn()函數(shù)可以參閱jQuery的fadeIn()方法一章節(jié)。

6.remove()函數(shù)可以參閱jQuery的remove()方法一章節(jié)。 

7.mousemove事件可以參閱jQuery的mousemove事件一章節(jié)。 




聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com