腳本之家
以上代碼實現了我們的要求,下面簡單介紹一下實現過程:
代碼注釋:
1.this.screenshotPreview=function(){ },聲明一個函數用來實現跟隨效果,在本效果中,this其實是可以省略,它指向window。
2.xOffset=10,聲明一個變量,用來規定鼠標指針距離彈出圖片的橫向距離。
3.yOffset=30,聲明一個變量,用來規定鼠標指針距離彈出圖片的縱向距離。
4.$("a.screenshot").hover(function(e){},function(e){}),規定當鼠標移到鏈接和離開鏈接所要執行的函數。
5.this.t = this.title,將鏈接的title屬性值賦值給t屬性,這里的this是指向當前鼠標懸浮的鏈接對象。
6.var c = (this.t != "") ? "
" + this.t : "",如果this.t不為空,也就是存在title屬性值,那么插入一個換行符并且連接當前標題內容,否則將c設置為空。
7.$("body").append(""),將圖片和相關說明添加到body。
"+ c +"
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast"),設置p元素的top和left屬性值,并且采用淡入效果展現。
9.this.title=this.t,將title內容賦值給this.title,其實不要這一句也沒有任何問題,有點多余。
10.$("#screenshot").remove(),移出p元素。
11.$("a.screenshot").mousemove(function(e){}),用來設置當鼠標指針移動時,圖片能夠跟隨。
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset)+"px"),設置p元素的top和left屬性值,能夠實現跟隨效果。聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com