<html>

<head>

<title>跟随滚动条的图片</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<STYLE media=screen type=text/css>

#floater {

         POSITION: absolute; VISIBILITY: visible; WIDTH: 10px; Z-INDEX: 10

          }

//不知道为什么要定义floater为样式表!

</STYLE>

<script language="javascript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// -->

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000" >

<div id="floater" style="position:absolute; left:436px; top:60px; width:152px; height:178px; z-index:12"><img border=0 src="

<SCRIPT language=javascript>

     self.onError=null;

     currentX = currentY = 0;

     whichIt = null;

     lastScrollX = 0; lastScrollY = 0;

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

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

     <!-- STALKER CODE -->

     function heartBeat() {

         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);

     else percent = Math.floor(percent);

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

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

     lastScrollY = lastScrollY + percent;

     }

         if(diffX != lastScrollX) {

             percent = .1 * (diffX - lastScrollX);

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

             else percent = Math.floor(percent);

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

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

             lastScrollX = lastScrollX + percent;

         }   

     }

     <!-- /STALKER CODE -->

     <!-- DRAG DROP CODE   鼠标拖放事件-->

     function checkFocus(x,y) {

     stalkerx = document.floater.pageX;

     stalkery = document.floater.pageY;

     stalkerwidth = document.floater.clip.width;

     stalkerheight = document.floater.clip.height;

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

     else return false;

     }

     function grabIt(e) {

         if(IE) {

             whichIt = event.srcElement;

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

                 whichIt = whichIt.parentElement;

                 if (whichIt == null) { return true; }

         }

             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.MOUSEMOVE);

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

     whichIt = document.floater;

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

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

     }

         }

     return true;

     }

     function moveIt(e) {

         if (whichIt == null) { return false; }

         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;

     return false;

         }

     return false;

     }

     function dropIt() {

         whichIt = null;

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

     return true;

     }

     <!-- DRAG DROP CODE 鼠标拖放事件-->

     if(NS) {

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

         window.onmousedown = grabIt;

         window.onmousemove = moveIt;

         window.onmouseup = dropIt;

     }

     if(IE) {

         document.onmousedown = grabIt;

         document.onmousemove = moveIt;

         document.onmouseup = dropIt;

     }

     if(NS || IE) action = window.setInterval("heartBeat()",1);

</SCRIPT>

 

 

 

 

 

<font size="7" color="#FF0000">跟随滚动条的图片</font><br>

<font size="4" color="#FF0000">(跟随滚动的图层名字:floater,必须使用该名称才有,跟随滚动,以及拖放属性) </font><br>

 

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</body>  

</html>