本文實例講述了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>運行效果截圖如下:

完整實例代碼點擊此處本站下載。
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答