您的位置：首页 > Web前端 > JavaScript

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

2010-05-29 13:20 573 查看
实现原理和鼠标拖拽差不多,也有智能感知页面边界的开关.

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

JS代码:

/*
*名称:oMouseFollow
*用途:浮动层跟随鼠标(智能感应边界);
*参数说明:
*gsid: 跟随鼠标的对像;
*options: 参看setOptions方法;
***********************************************
*使用请保留作者信息:含浪 w.why@163.com        *
***********************************************
*/

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(mX<thew&&mY<theh){
var s1,s2,s3,s4;
s1=function(){
var x,y;
if(mX>pmw-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();
}
}


调用方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<mce:script src="oMouseFollow.js" mce_src="oMouseFollow.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
window.onload=function(){
var a = new oMouseFollow("fdc1",{
MPY_X:25,
MPY_Y:-5
});
var b = new oMouseFollow("fdc2",{
fuDiv:"div1",
onShow:function(){document.getElementById("fdc2").style.display="block";},
onHide:function(){document.getElementById("fdc2").style.display="none";},
AI:true
});
}
// --></mce:script>
</head>
<body>
<div id="fdc1" style="border:1px #000 solid;" mce_style="border:1px #000 solid;">dsfsdfsdfsdfsdfsdfsdfsdf</div>
<div id="fdc2" style="width:100px; height:auto; border:1px #000 solid;">
地士大夫枯<br />
工村 枯 要要霜<br />
士大夫<br />
士大夫
</div>
<div id="div1" style="width:300px; height:200px; margin:0 auto; background-color:#CCC; border:1px #000 solid;">第一个DIV</div>
<div id="div2" style="width:300p; height:400px; margin:50px; background-color:#0FF;border:1px #000 solid;">第二个DIV</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航