美妙的标题提示|基于jQuery.Lazyload
2010.05.12
Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里，同时提升了用户感受度。而且我认为，系统的 title 提示有时间延迟，用 js 实现的可以迅速的展示出来。
大家都知道 jQuery 是一个美妙且强大的 Javascript 库，用 jQuery 来写这个效果的话不单代码得到了很大的精简，效果的实现也可以更加美妙，更加容易对效果进行扩展。
请看下面的代码：
var sweetTitles = {
x : 10,
y : 20,
tipElements : "a",
init : function() {
$(this.tipElements).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); // url 超过 30 个字符的部分用 ... 代替
this.title = "";
var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip')
.css({
"opacity":"0.8", // 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"
});
});
}
};
$(function(){
sweetTitles.init();
});
x : 10,
y : 20,
tipElements : "a",
init : function() {
$(this.tipElements).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); // url 超过 30 个字符的部分用 ... 代替
this.title = "";
var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
$('body').append(tooltip);
$('#tooltip')
.css({
"opacity":"0.8", // 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"
});
});
}
};
$(function(){
sweetTitles.init();
});
以上代码可单独建一个JS文件，调用即可。
记住调用前载入 jQuery 库（可在head之间加入
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
即可）。
当然光有效果没有样式还不行，需要制定一些 css 样式才能让整个效果显得更加美妙。以下是我的 css，供参考。
body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }
．
暂无留言我要留言 »