因为很喜欢这样的效果,就是鼠标指到有链接的地方的时候会有一个可爱的小框框,然后显示那个链接所到的网址和名称。具体效果的话看我网站就ok了。。。

其实这样的代码很早之前就看到了,只是当时觉得麻烦就没弄的,然后这2天终于还是加了上去。实现起来也很简单。2段代码就ok了。

先是JQuery的部分,自己看着放就好了,因为我没单独放到一个js文件下,所以就随便放了,放在了页面底部。。。

<script type="text/javascript" >
jQuery(document).ready(function($){
$("a").mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." :this.myHref);
this.title = "";
var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
});
</script>

然后就是css的美化了,这个是从别人那firebug出来的。。。哈哈,因为觉得他那边的效果比较好看。。。呼呼~~· :kiss: :yum: :nerd:

#tooltip {-moz-border-radius:7px 7px 7px 7px;background:none repeat scroll 0 0 #000000;border:2px double #FFFFFF;min-height:1em;padding:5px;position:absolute;text-align:left;width:auto;z-index:1000;}
#tooltip p {color:#FFFFFF;font:12px verdana,arial,sans-serif;margin:0;padding:0;}
#tooltip p em {color:#00CCFF;display:block;font-style:normal;font-weight:700;margin-top:3px;}
#tooltip p em span {color:#FFFFFF;font-weight:700;}

自己找地方放吧。就这样。ok了。。。试试效果吧