自定義滑鼠懸浮連結彈出提示程式碼例項

antzone發表於2017-04-18

滑鼠懸浮連結會彈出一個提示效果，這個效果是利用title屬性定義的。

不過自帶的這個提示不夠美觀，在實際應用中很難滿足需要，下面就通過程式碼例項介紹一下如何自定義此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
span {
  background-color: #dedebe;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function() {
  var x = 5;
  var y = 10;
  $("a.tooltip").mouseover(function() {
    this.myTitle = this.title;
    this.title = "";
    var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>";
    $("body").append(tooltip);
    $(this).mousemove(function(e){
      $("#tooltip").css({
        position : "absolute",
        left : (e.pageX + x) + "px",
        top : (e.pageY + y) + "px"
      }).show("fast");
    })
  }).mouseout(function() {
    $(this).unbind("mousemove");
    this.title = this.myTitle;
    $("#tooltip").remove();
  });
});
</script>
</head>
<body>
<a href="#" class="tooltip" title="softwhy.com">螞蟻部落歡迎您</a>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function() {})，文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var x = 5，宣告一個變數並賦值為5，用來規定滑鼠指標距離彈出層橫向距離。

（3）.var y = 10，宣告一個變數並賦值為5，用來規定滑鼠指標距離彈出層的縱向距離。

（4）. $("a.tooltip").mouseover(function() {})，為連結註冊mouseover事件處理函式。

（5）.this.myTitle = this.title，將當前連結的title屬性值寫入自定義屬性myTitle。

（6）.this.title = ""，將連結的title屬性值清空，否則滑鼠懸浮的時候，自帶的提示層也會展現。

（7）.var tooltip = "<span id='tooltip'>" + this.myTitle + "</span>"，提示層html字串。

（8）.$("body").append(tooltip)，在body內容新增這個提示曾。

（9）.$(this).mousemove(function(e){})，註冊mousemove事件處理函式。

（10）.$("#tooltip").css({

  position : "absolute",

  left : (e.pageX + x) + "px",

  top : (e.pageY + y) + "px"

}).show("fast")，當滑鼠移動的時候，彈出層能夠實現跟隨。

（11）.mouseout(function() {

  $(this).unbind("mousemove");

  this.title = this.myTitle;

  $("#tooltip").remove();

}),當滑鼠離開連結，那麼就會將title屬性值還原，同事解綁 mousemove事件處理函式。

並將建立的層刪除。

二.相關閱讀:

（1）.mouseover事件可以參閱jQuery mouseover事件一章節。

（2）.append()可以參閱jQuery append()一章節。

（3）.mousemove事件可以參閱jQuery mousemove事件一章節。

（4）.pageX可以參閱jQuery event.pageX一章節。

（5）.mouseout事件可以參閱jQuery mouseout事件一章節。

（6）.remove()可以參閱jQuery remove()方法一章節。

相關文章