/* jQuery 鼠标提示插件 v2.0 https://github.com/28269890/sTips Demo:https://28269890.github.io/sTips */ (function($){ $.fn.sTips = function(options) { var o = $.extend({}, $.fn.sTips.defaults,options); if($("#_sTips").length==0){ $("body").append("
"); } $("#_sTips").hide(); $("#_sTips").bind({ mouseenter:function(){ $("#_sTips").stop(true).fadeTo(o.inTime,o.phy); }, mouseleave:function(){ $("#_sTips").fadeOut(o.outTime); } }); var sTipsPosition = function(e){ var s = $(e).offset(); var x = s.left; var y = s.top - $("#_sTips").outerHeight(); if(o.position=="1"){ x = s.left - $("#_sTips").outerWidth(); y = s.top - $("#_sTips").outerHeight(); } if(o.position=="11"){ x = s.left; y = s.top - $("#_sTips").outerHeight(); } if(o.position=="12"){ x = s.left - $("#_sTips").outerWidth(); y = s.top; } if(o.position=="2"){ x = s.left + $(e).outerWidth(); y = s.top - $("#_sTips").outerHeight(); } if(o.position=="21"){ x = s.left + $(e).outerWidth() - $("#_sTips").outerWidth(); y = s.top - $("#_sTips").outerHeight(); } if(o.position=="22"){ x = s.left + $(e).outerWidth(); y = s.top; } if(o.position=="3"){ x = s.left + $(e).outerWidth(); y = s.top + $(e).outerHeight(); } if(o.position=="31"){ x = s.left + $(e).outerWidth(); y = s.top + $(e).outerHeight() - $("#_sTips").outerHeight(); } if(o.position=="32"){ x = s.left + $(e).outerWidth() - $("#_sTips").outerWidth(); y = s.top + $(e).outerHeight(); } if(o.position=="4"){ x = s.left - $("#_sTips").outerWidth(); y = s.top + $(e).outerHeight(); } if(o.position=="41"){ x = s.left - $("#_sTips").outerWidth(); y = s.top + $(e).outerHeight() - $("#_sTips").outerHeight(); } if(o.position=="42"){ x = s.left ; y = s.top + $(e).outerHeight(); } $("#_sTips").css({ "left": x, "top": y }); } this.each(function(){ var _this = this if(this.alt){this.sTips=this.alt;$(this).removeAttr("alt")}; if(this.title){this.sTips=this.title;$(this).removeAttr("title")}; if(this.sTips==undefined){return}; var titlelength = this.sTips.indexOf("{||}") if(titlelength > 0){ this.sTipsTop = this.sTips.substr(0,titlelength); this.sTipsBody = this.sTips.substr(titlelength + 4,this.sTips.length); }else{ this.sTipsBody = this.sTips; } $(this).on({ mousemove:function(e){ if (o.mouse==0){ return; } var x = e.pageX; var y = e.pageY; if (o.mouse==1){ x -= (o.mousez + $("#_sTips").outerWidth()); y -= (o.mousez + $("#_sTips").outerHeight()); }else if (o.mouse==2){ x += o.mousez; y -= (o.mousez + $("#_sTips").outerHeight()); }else if(o.mouse==3){ x += o.mousez; y += o.mousez; }else if(o.mouse==4){ x -= (o.mousez + $("#_sTips").outerWidth()); y += o.mousez; } if(x + $("#_sTips").outerWidth() >= document.body.clientWidth){ x = document.body.clientWidth - $("#_sTips").outerWidth() ; }; if(y + $("#_sTips").outerHeight() >= document.body.clientHeight){ y = document.body.clientHeight - $("#_sTips").outerHeight() ; }; if (x < 0){x=0} if (y < 0){y=0} $("#_sTips").css({ "left": x, "top": y }); }, mouseenter: function() { $("#_sTips").hide(); $("#_sTips").stop(); $("#_sTips").html(""); if(this.sTipsTop){ $("#_sTips").prepend("
"+this.sTipsTop+"
"); $("#_sTips_Top").addClass(o.topCss); } $("#_sTips").append("
"); $("#_sTips").addClass(o.sTipsCss); $("#_sTips").css("z-index",99999999999); if (this.sTipsBody.substr(0, 5)=="ajax:"){ $("#_sTips_body").html(o.ajaxloading); $.ajax({ url: this.sTipsBody.substr(5,this.sTipsBody.length), dataType: 'html', global:false, error: function(xhr,error){ if(error == 'error'){ if(o.ajaxerror != "off"){ $("#_sTips_body").html("AJAX错误:" + xhr.statusText + ""); sTipsPosition(_this) } } }, success: function(shtml){ $("#_sTips_body").html(shtml); sTipsPosition(_this) } }); }else if(this.sTipsBody.substr(0, 3)=="fn:"){ var html=eval(this.sTipsBody.substr(3,this.sTipsBody.length)) if(html){ $("#_sTips_body").html(html); } } else{ $("#_sTips_body").html(this.sTipsBody); }; sTipsPosition(this) $("#_sTips").fadeTo(o.inTime,o.phy); }, mouseleave: function(){ $("#_sTips").fadeOut(o.outTime); } }); }); }; //--这里的都是初始值,能够设定的内容也都在这里 $.fn.sTips.defaults = { phy:1, //透明度 0-1 inTime:200,//淡入时间 outTime:200,//淡出时间 sTipsCss:"sTips",//给外框指定css样式 topCss:"sTip-Top",//给提示框头部指定css样式,值为css名称 bodyCss:"sTips-Body",//给主提示框指定css样式,值为css名称 ajaxError:"",//ajax错误提示开关,唯一值:off ajaxLoading:"loading...",//ajax读取之前的信息,也可修改成图片例如: position:2,//位置:角+排列 1:左上,2:右上,3:右下,4:左下,排列:1 2 从左到右,从上到下。 mousez:10,//提示框和鼠标之间的距离 mouse:0//鼠标跟随。1:左上,2:右上,3:左下,4:右下 }; })(jQuery);