悬浮层

悬浮窗交互

最新推荐文章于 2025-01-17 10:12:19 发布

最新推荐文章于 2025-01-17 10:12:19 发布 · 123 阅读

文章标签：

#IE #JavaScript #ViewUI

本文介绍了一个使用JavaScript实现的页面悬浮窗口，该窗口可以根据用户的滚动位置进行动态调整，并支持鼠标拖动定位。通过监听滚动事件和鼠标事件，实现了悬浮窗口跟随滚动条移动及手动拖拽的功能。

<divid=sohususpend

style="LEFT:90%;POSITION:absolute;TOP:50%;VISIBILITY:visible;width:100px;height:74px"><ahref="#11"><imgsrc="/image/png-097.gif"width="100"height="100"border="0"></a></div>

<p><scriptlanguage=JavaScript>...

self.onError=null;

currentX=currentY=0;

whichIt=null;

lastScrollX=0;lastScrollY=0;

NS=(document.layers)?1:0;

IE=(document.all)?1:0;

functionheartBeat()...{

if(IE)...{diffY=document.body.scrollTop;diffX=document.body.scrollLeft;}

if(NS)...{diffY=self.pageYOffset;diffX=self.pageXOffset;}

if(diffY!=lastScrollY)...{

percent=.1*(diffY-lastScrollY);

if(percent>0)percent=Math.ceil(percent);

elsepercent=Math.floor(percent);

if(IE)document.all.sohususpend.style.pixelTop+=percent;

if(NS)document.sohususpend.top+=percent;

lastScrollY=lastScrollY+percent;

}

if(diffX!=lastScrollX)...{

percent=.1*(diffX-lastScrollX);

if(percent>0)percent=Math.ceil(percent);

elsepercent=Math.floor(percent);

if(IE)document.all.sohususpend.style.pixelLeft+=percent;

if(NS)document.sohususpend.left+=percent;

lastScrollX=lastScrollX+percent;

}

functioncheckFocus(x,y)...{

stalkerx=document.sohususpend.pageX;

stalkery=document.sohususpend.pageY;

stalkerwidth=document.sohususpend.clip.width;

stalkerheight=document.sohususpend.clip.height;

if((x>stalkerx&&x<(stalkerx+stalkerwidth))&&(y>stalkery&&y<(stalkery+stalkerheight)))returntrue;

elsereturnfalse;

}

functiongrabIt(e)...{

if(IE)...{

whichIt=event.srcElement;

while(whichIt.id.indexOf("sohususpend")==-1)...{

whichIt=whichIt.parentElement;

if(whichIt==null)...{returntrue;}

}

whichIt.style.pixelLeft=whichIt.offsetLeft;

whichIt.style.pixelTop=whichIt.offsetTop;

currentX=(event.clientX+document.body.scrollLeft);

currentY=(event.clientY+document.body.scrollTop);

}else...{

window.captureEvents(Event.MOUSEDOWN);

if(checkFocus(e.pageX,e.pageY))...{

whichIt=document.sohususpend;

StalkerTouchedX=e.pageX-document.sohususpend.pageX;

StalkerTouchedY=e.pageY-document.sohususpend.pageY;

}

returntrue;

}

functionmoveIt(e)...{

if(whichIt==null)...{returnfalse;}

if(IE)...{

newX=(event.clientX+document.body.scrollLeft);

newY=(event.clientY+document.body.scrollTop);

distanceX=(newX-currentX);distanceY=(newY-currentY);

currentX=newX;currentY=newY;

whichIt.style.pixelLeft+=distanceX;

whichIt.style.pixelTop+=distanceY;

if(whichIt.style.pixelTop<document.body.scrollTop)whichIt.style.pixelTop=document.body.scrollTop;

if(whichIt.style.pixelLeft<document.body.scrollLeft)whichIt.style.pixelLeft=document.body.scrollLeft;

if(whichIt.style.pixelLeft>document.body.offsetWidth-document.body.scrollLeft-whichIt.style.pixelWidth-20)whichIt.style.pixelLeft=document.body.offsetWidth-whichIt.style.pixelWidth-20;

if(whichIt.style.pixelTop>document.body.offsetHeight+document.body.scrollTop-whichIt.style.pixelHeight-5)whichIt.style.pixelTop=document.body.offsetHeight+document.body.scrollTop-whichIt.style.pixelHeight-5;

event.returnValue=false;

}else...{

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

if(whichIt.left<0+self.pageXOffset)whichIt.left=0+self.pageXOffset;

if(whichIt.top<0+self.pageYOffset)whichIt.top=0+self.pageYOffset;

if((whichIt.left+whichIt.clip.width)>=(window.innerWidth+self.pageXOffset-17))whichIt.left=((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

if((whichIt.top+whichIt.clip.height)>=(window.innerHeight+self.pageYOffset-17))whichIt.top=((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

returnfalse;

}

returnfalse;

}

functiondropIt()...{

whichIt=null;

if(NS)window.releaseEvents(Event.MOUSEDOWN);

returntrue;

}

if(NS)...{

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown=grabIt;