该特效“不但可以让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的
url,让用户知道自己将要去哪里”,能不能明显提升了用户感受得用户说了算,但我可以肯定的是这绝对能吸引用户的眼球!
jQuery代码,另存为JS或者整合:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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"});
});
});
|
CSS美化代码:
#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;}
最后,别忘了载入jQuery库!
分享到:
相关推荐
jQuery插件之一:Weebox弹出层 jQuery插件之一:Weebox弹出层 jQuery插件之一:Weebox弹出层
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
jQuery手机端弹出层提示对话框
jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层jquery 弹出层
jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效 jQuery顶部浮动弹出层动画弹出层特效
jquery弹出层插件,20种弹出层,特效杠杠滴
一个想当漂亮的jquery提示框:jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可...
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
jquery弹出层特效超炫jquery弹出层特效超炫jquery弹出层特效超炫
jquery弹出层代码,ajax异步获取页面,弹出层登录!
jQuery zoom图片弹出层插件简单的图片相册弹出层窗口 jQuery zoom图片弹出层插件简单的图片相册弹出层窗口 jQuery zoom图片弹出层插件简单的图片相册弹出层窗口
注意:那个如果你的模板有CSS文件的话,就要直接引入到本页面就行了,这个简化版不能在别的框架弹出层的,所以也就没有了那个cssurl属性了,也没有target 属性了
jquery特效插件FancyBox弹出层支持多种方式弹出层如:图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox
实现效果: ...大气绿色jQuery弹出框弹出层特效代码,支持三种弹出对话框模式,即提示信息、confirm确认、 alert提示三种弹框模式,特效代码基于jQuery实现,很不错的对话框,相比ArtDialog功能弱了点。效。
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
这个可以自定义的 可以弹出层关闭 父页面刷新 ,可以弹出层不关闭 父页面刷新
jquery.popup 弹出层选择 提示
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记