JQuery 鼠标提示特效之 Sweet Titles

万戈 2010.03.14 发布于：电脑网络 4,626 次践踏

JQuery 的 Sweet Titles 鼠标提示特效我早就用过了，但是后来发现和链接平移 JQuery 特效同时使用会在 IE 下有些冲突，虽说只有在我的主题上发现有这个情况，不过还是很可惜被我弃用了一段时间。今天却又被我重新用上了，用了比较折衷的方法，那就是只在友情链接页面使用 Sweet Titles，正好最近对友情链接做了彻底的改革，所以也就顺便对友链页面小小的美化一下。

说了半天，再来介绍一下什么是 Sweet Titles 吧，效果请见我的友情链接页面。Sweet Titles 是 JQuery 中有名的鼠标悬浮提示效果之一，与其相类似的 JQuery 插件也不少，比如说，jQuery Plugin - Tooltip、jTip - The jQuery Tool Tip、clueTip、BetterTip、Flash Tooltips using jQuery、ToolTip，这些都是 JQuery 的鼠标提示效果插件，各有特色，不过相比较而言，Sweet Titles 是其中代码最少，使用最方便，效果也相当华丽丽的一个，所以个人感觉很适合博客使用。

接下来说一下使用方法：

一、载入 JQuery 库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

其实用 JQuery 1.4 有点浪费，JQuery 1.2x 就完全可以胜任。

二、执行代码

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"});

});
});

三、样式美化部分

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}

#tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

以上代码部分摘自：http://immmmm.com/jquery-study-notes-the-wonderful-title-tips.html

与

JQuery 鼠标提示特效之 Sweet Titles

Javascript,jQuery,JS,Sweet Titles,WordPress