jQuery实现文字提示信息




(function($){

$.fn.extend({
plugins_tip:function(){
return this.each(function(){
var self = this;
//获取个性化的位置、宽度
var options={_tip_left:$(self).attr("tipLeft"),_tip_top:$(self).attr("tipTop"),_tip_width:$(self).attr("tipWidth")};
var settings = {_tip_left:10,_tip_top:10,_tip_width:200};//默认值
$.extend(settings, options);
$(self).css("cursor","default");
var _s={
_init:function(){
this._event();
},
_g:{_wrap:$()},
_html:function(){
var html = [
"<div class='plugins_tip_wrap'>"
,"<div class='plugins_tip_arrow'></div>"
,"<div class='plugins_tip_content'></div>"
,"</div>"
].join("");
$("body").append(html);
_s._g._wrap=$(".plugins_tip_wrap");
$(".plugins_tip_content",_s._g._wrap).html($(self).attr("otitle"));
if(_s._g._wrap.width()>settings._tip_width){_s._g._wrap.width(settings._tip_width)};
},
_event:function(){
$(self).hover(function(event){
_s._html();
_s._fn._set_position(event);
_s._g._wrap.show();
},function(){
_s._g._wrap.hide();
_s._g._wrap.remove();
});
$(self).mousemove(function(event){
_s._fn._set_position(event);
})
},
_fn:{
_set_position:function(e){
var _x = e.pageX+parseInt(settings._tip_left);
var _y = e.pageY+parseInt(settings._tip_top);
_s._g._wrap.css( {left : _x , top : _y } );
}
}
}
_s._init();
})
}
})

$(function(){
function tipbind(){
//防止重复绑定
if(window.plugins_tip) return;
$("a[otitle]").plugins_tip();
window.plugins_tip={};
};
tipbind();
})
})(jQuery)

/*
.plugins_tip_wrap{ position:absolute; display:none; font-size:12px; line-height:18px; color:#18508e;opacity:0.7;filter:alpha(opacity=70);border-right:2px solid #ccc; border-bottom:2px solid #ccc}
.plugins_tip_arrow{ position:absolute; top:0px; left:0px; width:0px; height:30px;}
.plugins_tip_content{ padding:4px 6px; background:#dce8f2;}
*/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值