jQuery實現的超鏈接提示效果示例【附demo源碼下載】

2019-11-20 09:02:04

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現的超鏈接提示效果。分享給大家供大家參考，具體如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><style type="text/css">*{margin:0;padding:0;}ul li{ list-style:none;}img {border:0 none;}body {padding:100px;}.tooltip{position:absolute;display:none;border:1px solid #333; border-radius:8px; box-shadow:0 0 3px rgba(000,000,000,0.8);background:rgba(247,245,209,0.5);padding:3px;color:#333;display:none;}/* border-radius，box-shadow ie9以下都不兼容 */</style><div class="test">  <a href="#" class="link" title="這是我的超鏈接提這是我的超<br>  <strong>鏈接</strong>提這是我的超鏈接提這是<img src='jb51.gif'>我的超<br>  鏈接提這是我的超鏈接提這是我的超鏈接提示1.">自定義鏈接提示</a>  <a href="#" class="link">默認title提示</a>  <a href="#" class="link" title="自定義TITLE提示2222！！！！">自定義鏈接提示</a>  <a href="#" title="原始鏈接TITLE提示！">原始鏈接title提示</a> </div></body><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function() {  var x=10;  var y=20;  $(".link").mouseover(function(e){    //alert(e.pageX);    if(typeof($(this).attr('title'))!='undefined'){ // 判斷標簽中是否有定義title屬性      this.my_tit=this.title;      this.title='';      var tooltip="<div class='tooltip'>"+this.my_tit+"</div>";      $("body").append(tooltip);      $(".tooltip").css({        display:'block',        left: e.pageX+x,        top: e.pageY+y        })      };    }).mouseout(function(){      if(typeof($(this).attr('title'))!='undefined'){        this.title=this.my_tit;        $(".tooltip").remove();      };    }).mousemove(function(e){// 鼠標移動時跟隨      $(".tooltip").css({      left: e.pageX+x,      top: e.pageY+y    })  })});</script></html>

運行效果截圖如下：