封装的一个JS跟随鼠标效果

实现原理和鼠标拖拽差不多,也有智能感知页面边界的开关.

无论用来做Tooltip,还是预览图片都能很好的完成

 

JS代码:

/* *名称:oMouseFollow *用途:浮动层跟随鼠标(智能感应边界); *参数说明: *gsid: 跟随鼠标的对像; *options: 参看setOptions方法; *********************************************** *使用请保留作者信息:含浪 [email protected] * *********************************************** */ var oMouseFollow = function(gsid,options){ this.gsDiv=this.g(gsid); this.setOptions(options); this.info(); } oMouseFollow.prototype = { g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;}, ae:function(el,type,call) { if(el.addEventListener){//火狐 el.addEventListener(type,call,false); }else{//IE el.attachEvent("on"+type,call); }; }, oMouse:function(e){ if(e.pageX || e.pageY){//FF return {x:e.pageX-(document.documentElement.scrollLeft+document.body.scrollLeft), y:e.pageY-(document.documentElement.scrollTop+document.body.scrollTop)}; }else{//IE return{x:e.clientX - document.documentElement.clientLeft,y:e.clientY - document.documentElement.clientTop}; }; }, setOptions:function(options){//MPY_X,MPY_Y相对鼠标的偏移量;XZ_X,XZ_Y跟随层的大小效正量,鼠标移入时语句 this.options={ fuDiv:document.documentElement, MPY_X:15,//相对鼠标的偏移量 MPY_Y:18, XZ_X:0,//跟随层的大小效正量 XZ_Y:0, AI:true,//智能定位 onShow:function(){},//鼠标移入时执行 onHide:function(){}//鼠票移出时执行 }; for(var o in options){ this.options[o]=options[o]; }; this.fuDiv = this.g(this.options.fuDiv); }, move:function(e){ var oM=this.oMouse(e||window.event); var mX =oM.x; var mY =oM.y; var jX = (document.documentElement.scrollLeft+document.body.scrollLeft); var jY = (document.documentElement.scrollTop+document.body.scrollTop); var pmw=document.documentElement.clientWidth; var pmh=document.documentElement.clientHeight; var thew,theh; var x,y; this.gsDiv.style.position="absolute"; thew=this.gsDiv.offsetWidth+this.options.MPY_X+this.options.XZ_X; theh=this.gsDiv.offsetHeight+this.options.MPY_Y+this.options.XZ_Y; if(((thew+mX)<=pmw && (theh+mY)<=pmh)||!this.options.AI){ x=mX+this.options.MPY_X;y=mY+this.options.MPY_Y; }else if(thew+mX>pmw && theh+mY<=pmh){ x=pmw-this.gsDiv.offsetWidth-this.options.XZ_X; y=mY+this.options.MPY_Y; }else if(thew+mX<=pmw && theh+mY>pmh){ x=mX+this.options.MPY_X; y=pmh-this.gsDiv.offsetHeight-this.options.XZ_Y; }else{ if(mXpmw-mX){x=mX-this.options.MPY_X}else{x=pmw-mX-this.options.MPY_X;}; y=pmh>this.gsDiv.offsetHeight?this.gsDiv.offsetHeight:pmh; return x*y; }; s2=function(){ var x,y; x=pmw>this.gsDiv.offsetWidth?this.gsDiv.offsetWidth:pmw; if(mY>pmh-mY){y=mY-this.options.MPY_Y;}else{y=pmh-mY-this.options.MPY_Y;}; return x*y; }; if(s1()>=s2()){ x=mX>pmw-mX?mX-thew:mX+this.options.MPY_X;y=pmh-this.gsDiv.offsetHeight-this.options.XZ_Y; }else{ x=pmw-this.gsDiv.offsetWidth-this.options.XZ_X;y=mY>pmh-mY?mY-theh:mY+this.options.MPY_Y;}; }else{ x = mX>thew ? mX-thew : pmw-this.gsDiv.offsetWidth-this.options.XZ_X; y = mY>theh ? mY-theh : pmh-this.gsDiv.offsetHeight-this.options.XZ_Y; }; }; this.gsDiv.style.left=x+jX+'px'; this.gsDiv.style.top=y+jY+'px'; }, info:function(){ var o=this; var load=function(a) {//图片加载 o.ae(o.fuDiv,"mousemove",function(event){o.move.call(o,event);}); o.ae(o.fuDiv,"mouseover",function(){o.options.onShow();}); o.ae(o.fuDiv,"mouseout",function(){o.options.onHide();}); }; load(); } }

 

调用方法:

 

dsfsdfsdfsdfsdfsdfsdfsdf

地士大夫枯
工村 枯 要要霜
士大夫
士大夫

第一个DIV

第二个DIV