jQuery: vTip
2011-11-24 – 11:01 下午 --- 6,160 次阅读
vTip 这个基于 jQuery 的气泡提示只有 706 字节(压缩后),比本站以前用的 SweetTitle 小得多了(5k),功能却一点也不差,稍微修改了一下就很好用了。
// vTips
this.vtip = function() {
this.xOffset = -10; // 相对鼠标指针的水平偏移
this.yOffset = 10; // 相对鼠标指针的垂直偏移
$('a').add('abbr').add('acronym').unbind().hover( //可以通过 add 增减需要添加的标签,也可以只选择某 class 的标签,例如:$('.vtip')......
function(e) {
hasTitle = false;
if(this.title!='' && $('img', this).length==0) hasTitle = true; // title 为空或者有 img 子元素的标签不作处理,避免显示空白提示泡或者与系统自带提示重叠
if(hasTitle) {
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset); this.left = (e.pageX + xOffset);
$('body').append( '<p id="vtip">' + this.t + '</p>' );
$('p#vtip')
.css({
"opacity":"0.8",
"top":this.top+"px",
"left":this.left+"px"
}).fadeIn("slow");
}
},
function() {
if(this.t){
this.title = this.t;
$("p#vtip").fadeOut("slow").remove();
}
}
).mousemove(
function(e) {
if($("p#vtip").length>0) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("p#vtip").css("top", this.top+"px").css("left", this.left+"px");
}
}
);
};
jQuery(document).ready(function($){vtip();})
p#vtip {
display: none;
position: absolute;
width: auto;
max-width:280px;
padding: 5px;
left: 5px;
font-size: 11px;
background-color: #fff;
border: 1px solid #a6c9e2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
z-index: 9999;
}
p#vtip #vtipArrow {
position: absolute;
top: -10px;
left: 5px;
}
引用本文,复制粘贴...
JavaScript | Trackback | Comments [RSS 2.0] | FavLinks |
您必须 登录 才能发表评论.