jQuery 滑鼠懸浮連結彈出跟隨圖片詳解
分享一段程式碼例項,它實現了當滑鼠滑過連結的時候,能夠出現跟隨滑鼠指標移動的圖層。
在實際應用中,一般是對於連結的一些說明文字或者圖片等。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; 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 src="http://libs.baidu.com/jquery/1.9.0/jquery.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" rel="mytest/demo/thesmall.jpg">螞蟻部落</a> </body> </html>
以上程式碼實現了我們的要求,下面簡單介紹一下實現過程:
一.程式碼註釋:
(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 != "") ? "<br/>" + this.t : "",如果this.t不為空,也就是存在title屬性值,那麼插入一個換行符並且連線當前標題內容,否則將c設定為空。
(7).$("body").append("<p id='screenshot'><img src='"+ this.rel +"'/>"+ c +"</p>"),將圖片和相關說明新增到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屬性值,能夠實現跟隨效果。
二.相關閱讀:
(1).hover()函式可以參閱jQuery hover事件一章節。
(2).append()函式可以參閱jQuery append()一章節。
(3).css()函式可以參閱jQuery css()方法一章節。
(4).pageY屬性可以參閱jQuery event.pageY屬性一章節。
(5).fadeIn()函式可以參閱jQuery fadeIn()方法一章節。
(6).remove()函式可以參閱jQuery remove()方法一章節。
(7).mousemove事件可以參閱jQuery mousemove事件一章節。
相關文章
- 滑鼠懸浮彈出滑鼠跟隨層程式碼例項
- 滑鼠懸浮小圖彈出大圖效果詳解
- 滑鼠懸浮連結彈出提示程式碼例項
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- css滑鼠懸浮小圖彈出大圖效果CSS
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- 自定義滑鼠懸浮連結彈出提示程式碼例項
- jquery 滑鼠移到圖片彈出浮動層顯示大圖片例子jQuery
- 滑鼠懸浮實現當前圖片高亮效果詳解
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- jquery滑鼠懸浮彈出帶有箭頭的tips效果jQuery
- CSS滑鼠懸浮圖片動畫放大效果CSS動畫
- css滑鼠懸浮彈出說明層效果CSS
- CSS3滑鼠懸浮圖片縮小出現文CSSS3
- CSS滑鼠懸浮圖片模糊切換效果CSS
- 滑鼠懸浮圖片實現翻轉效果
- 滑鼠懸浮圖片實現縮放效果
- 滑鼠懸浮連結出現音效效果程式碼例項
- jquery css3跟隨滑鼠晃動的圖片效果jQueryCSSS3
- jQuery實現的滑鼠在連結懸浮背景變色程式碼jQuery
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- CSS3連結<a>滑鼠懸浮動畫效果CSSS3動畫
- CSS3滑鼠懸浮圖片閃動效果CSSS3
- 滑鼠懸浮圖片3D翻轉出現文字說明3D
- CSS滑鼠懸浮在超連結上彈出提示框CSS
- 滑鼠懸浮實現連結背景變色效果
- css 滑鼠懸浮連結背景變色程式碼CSS
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- js實現彈出層滑鼠跟隨效果JS
- 滑鼠懸浮於連結<a>之上出現提示文字效果程式碼
- css3滑鼠懸浮小球彈性效果CSSS3
- js滑鼠懸浮連結背景動畫方式漸變效果JS動畫
- javascript實現滑鼠懸浮圖片實現抖動效果JavaScript
- JavaScript跟隨滑鼠移動的圖片效果JavaScript
- css滑鼠懸浮切換圖片滑鼠離開又恢復預設CSS
- 滑鼠懸浮改變連結樣式程式碼例項