不亦乐乎 » 网页网络 » Sweet Titles for jQuery (美妙的标题提示) !

Sweet Titles for jQuery (美妙的标题提示) !

2010年02月21日 1,561人路过 参与围观5人围观

Sweet Titles 这个名字源自于一个改变 Title 提示效果的 js 插件 Sweet Titles Finalized。此插件不但让你的 title 提示效果变得美观，而且可以显示出你将要点击的链接的 url，让用户知道自己将要去哪里，同时提升了用户感受度。而且我认为，系统的 title 提示有时间延迟，用 js 实现的可以迅速的展示出来。

大家都知道 jQuery 是一个美妙且强大的 Javascript 库，用 jQuery 来写这个效果的话不单代码得到了很大的精简，效果的实现也可以更加美妙，更加容易对效果进行扩展。

所以我用 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();
});

代码是不是很简单，记住不要忘了载入 jQuery 库哦。

当然光有效果没有样式还不行，需要制定一些 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; }

原文地址：http://leeiio.me/sweet-titles-for-jquery/

无觅相关文章插件，快速提升流量

分类：网页网络, 标签：, ,
你可以通过 RSS 2.0 订阅关注本日志评论, 也可以直接 参与围观, 或 trackback 到你的博客上.
本日志地址: http://www.happyet.org/373.html, 转载请注明出处!
«
»

“Sweet Titles for jQuery (美妙的标题提示) !”上有 5 条评论

  1. 万戈 说道：
    2010年02月21日 19:20

    用过，在IE下使用反应比较慢。。。

    回复
  2. 万戈 说道：
    2010年02月21日 19:21

    说说，侧边栏“围观群众”的头像是不是有点问题？

    回复
    • LMS 说道：
      2010年02月21日 22:17

      是的,用了别人的代码后就这样,不知道问题出在哪里,懒的改就放那了.原来用过你的,也没成功，人品不行！

      回复
  3. fefe 说道：
    2010年02月23日 15:46

    good

    回复

留下足迹