国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧

來源:懂視網 責編:小采 時間:2020-11-27 21:48:30
文檔

jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧

jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧:本文章介紹了一種比較常用的效果,那就是當鼠標滑過鏈接的時候,能夠出現跟隨鼠標指針移動的圖層,在實際應用中,一般是對于鏈接的一些說明文字或者圖片等等,下面是代碼實例: 腳本之家 body{ margin:0; padding:40px; background:#
推薦度:
導讀jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧:本文章介紹了一種比較常用的效果,那就是當鼠標滑過鏈接的時候,能夠出現跟隨鼠標指針移動的圖層,在實際應用中,一般是對于鏈接的一些說明文字或者圖片等等,下面是代碼實例: 腳本之家 body{ margin:0; padding:40px; background:#
本文章介紹了一種比較常用的效果,那就是當鼠標滑過鏈接的時候,能夠出現跟隨鼠標指針移動的圖層,在實際應用中,一般是對于鏈接的一些說明文字或者圖片等等,下面是代碼實例:





腳本之家


以上代碼實現了我們的要求,下面簡單介紹一下實現過程:
代碼注釋:
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("

"+ c +"

"),將圖片和相關說明添加到body。
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

文檔

jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧

jQuery鼠標懸浮鏈接彈出跟隨圖片實例代碼_javascript技巧:本文章介紹了一種比較常用的效果,那就是當鼠標滑過鏈接的時候,能夠出現跟隨鼠標指針移動的圖層,在實際應用中,一般是對于鏈接的一些說明文字或者圖片等等,下面是代碼實例: 腳本之家 body{ margin:0; padding:40px; background:#
推薦度:
標簽: 圖片 鼠標 js
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 日韩精品成人在线 | 波多野结衣免费在线 | 欧美在线一 | 欧美综合在线观看 | 国产精品久久久久国产精品 | 亚洲欧美视频一区 | 国产亚洲欧美日韩俺去了 | 国产成人综合久久精品尤物 | 成人国产一区二区三区精品 | 中文国产成人精品久久一区 | 亚洲国产欧美视频 | 免费精品在线观看 | 日韩视频免费 | 国产成人综合久久精品尤物 | 国内精品一区二区2021在线 | 欧美视频日韩视频 | 亚洲a∨精品一区二区三区下载 | 亚洲视频免费观看 | 国产欧美日韩在线不卡第一页 | 久热中文字幕在线精品首页 | 黄色a免费| 国产1区2区| 国产69精品久久久久99不卡 | 国产美女精品久久久久中文 | 99久久精品费精品国产一区二区 | 国产成人+亚洲欧洲 | 国产日韩在线观看视频网站 | 亚洲情a成黄在线观看动 | 劲爆欧美色欧美 | 日韩在线视频网 | 精品国产乱码久久久久久浪潮 | 国产精选免费视频 | 久操久热 | 国产日本精品 | 欧美日在线 | 亚洲国产一成人久久精品 | 欧美wwww | 精品视频第一页 | 日本久热 | 成人免费视频一区二区 | 亚洲国产精品视频 |