自帶的title的提示效果的響應速度是非常緩慢的,使用jQuery自制提示tooltip!

HTML:
<p><a href="#" title="超鏈接提示1" class="tooltip">提示1</a></p><p><a href="#" title="超鏈接提示2" class="tooltip">提示2</a></p><p><a href="#" title="自帶超鏈接提示1">自帶超鏈接提示1</a></p><p><a href="#" title="自帶超鏈接提示2">自帶超鏈接提示2</a></p>
CSS:
p a{display: block;width:150px;height:50px;line-height:50px; background:#FF3366;color:#fff;border-radius: 3px;text-align: center;} #tooltip{position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc;text-align: center;box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}JQ:
$(function(){ var x=10,y=20;//使得鼠標相對于tooltip偏離的距離 $("a.tooltip").mouseover(function(e){ this.myTitle=this.title;//獲取title,臨時存儲 this.title="";//避免和原生提示重復 var tooltip="<div id='tooltip'>"+this.myTitle+"</div>"; $("body").append(tooltip); //css()設置樣式 $("#tooltip").css({ "top":(e.pageY+y)+"px",//e.pageX相對與文檔,e.clientX相對于可視區 "left":(e.pageX+x)+"px", }).show("fast"); }).mouseout(function(){ this.title=this.myTitle;//重復恢復 $("#tooltip").remove();//記得要把生成的結點移除掉 }).mousemove(function(e){ $("#tooltip").css({ "left":(e.pageX+x)+"px", "top":(e.pageY+y)+"px", }); }); });改進版:將上面的tooltip內容加上圖片預覽!

JQ:
$(function(){ var x=10,y=20; $("a.tooltip").mouseover(function(e){ this.myTitle=this.title; this.title=""; var imgTitle=this.myTitle?"<br/><span id='tooltipspan'>"+this.myTitle+"</span>":""; var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='產品預覽圖'/>"+imgTitle+"</div>"; $("body").append(tooltip); $("#tooltip").css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px", }).show("fast"); }).mouseout(function(){ this.title=this.myTitle; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip").css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px", }) }); });以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答