jquery-tips悬浮提示插件分享
由于是在mac下写的，没什么低版本浏览器测试工具没做具体的兼容测试，而且我也不是前端还请多多包涵，js库用的jquery1.11.1，低版本应该也是可以的，需要自己去下jquery，只是写的好玩，分享一下，希望大家能一起改进
/**
*jquerytips提示插件jquery.tips.jsv0.1beta
*
*使用方法
*$(selector).tips({//selector为jquery选择器
*msg:'yourmessages!',//你的提示消息必填
*side:1,//提示窗显示位置1，2，3，4分别代表上右下左默认为1（上）可选
*color:'#FFF',//提示文字色默认为白色可选
*bg:'#F00',//提示窗背景色默认为红色可选
*time:2,//自动关闭时间默认2秒设置0则不自动关闭可选
*x:0,//横向偏移正数向右偏移负数向左偏移默认为0可选
*y:0,//纵向偏移正数向下偏移负数向上偏移默认为0可选
*})
*
*
*/
(function($){
$.fn.tips=function(options){
vardefaults={
side:1,
msg:'',
color:'#FFF',
bg:'#F00',
time:2,
x:0,
y:0
}
varoptions=$.extend(defaults,options);
if(!options.msg||isNaN(options.side)){
thrownewError('paramserror');
}
if(!$('#jquery_tips_style').length){
varstyle='<styleid="jquery_tips_style"type="text/css">';
style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
style+='.jq_tips_top{border-left:10pxsolidtransparent;left:20px;bottom:0px;}';
style+='.jq_tips_left{border-top:10pxsolidtransparent;right:0px;top:18px;}';
style+='.jq_tips_bottom{border-left:10pxsolidtransparent;left:20px;top:0px;}';
style+='.jq_tips_right{border-top:10pxsolidtransparent;left:0px;top:18px;}';
style+='.jq_tips_info{word-wrap:break-word;word-break:normal;border-radius:4px;padding:5px8px;max-width:130px;overflow:hidden;box-shadow:1px1px1px#999;font-size:12px;cursor:pointer;}';
style+='</style>';
$(document.body).append(style);
}
this.each(function(){
varelement=$(this);
varelement_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
varsideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
vartips=$('<div><i></i><div>'+options.msg+'</div></div>').appendTo(document.body);
tips.find('.jq_tips_arrow').css('border-'+sideName,'10pxsolid'+options.bg);
tips.find('.jq_tips_info').css({
color:options.color,
backgroundColor:options.bg
});
switch(options.side){
case1:
tips.css({
top:element_top-tips.outerHeight()+options.x,
left:element_left-10+options.y
});
break;
case2:
tips.css({
top:element_top-20+options.x,
left:element_left+element_width+options.y
});
break;
case3:
tips.css({
top:element_top+element_height+options.x,
left:element_left-10+options.y
});
break;
case4:
tips.css({
top:element_top-20+options.x,
left:element_left-tips.outerWidth()+options.y
});
break;
default:
}
varcloseTime;
tips.fadeIn('fast').click(function(){
clearTimeout(closeTime);
tips.fadeOut('fast',function(){
tips.remove();
})
})
if(options.time){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
tips.hover(function(){
clearTimeout(closeTime);
},function(){
closeTime=setTimeout(function(){
tips.click();
},options.time*1000);
})
}
});
returnthis;
};
})(jQuery);
以上所述就是本文的全部内容了，希望大家能够喜欢。