制作移动的浮动层

pop.js

  1. function heartBeat() {
  2. if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
  3. if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
  4. if(diffY != lastScrollY) {
  5. percent = .1 * (diffY - lastScrollY);
  6. if(percent > 0) percent = Math.ceil(percent);
  7. else percent = Math.floor(percent);
  8. if(IE) document.all.floater.style.pixelTop += percent;
  9. if(NS) document.floater.top += percent; 
  10. lastScrollY = lastScrollY + percent;
  11. }
  12. if(diffX != lastScrollX) {
  13. percent = .1 * (diffX - lastScrollX);
  14. if(percent > 0) percent = Math.ceil(percent);
  15. else percent = Math.floor(percent);
  16. if(IE) document.all.floater.style.pixelLeft += percent;
  17. if(NS) document.floater.left += percent;
  18. lastScrollX = lastScrollX + percent;
  19. }
  20. function checkFocus(x,y) { 
  21. stalkerx = document.floater.pageX;
  22. stalkery = document.floater.pageY;
  23. stalkerwidth = document.floater.clip.width;
  24. stalkerheight = document.floater.clip.height;
  25. if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
  26. else return false;
  27. }
  28. function grabIt(e) {
  29. if(IE) {
  30. whichIt = event.srcElement;
  31. while (whichIt.id.indexOf("floater") == -1) {
  32. whichIt = whichIt.parentElement;
  33. if (whichIt == null) { return true; }
  34. }
  35. whichIt.style.pixelLeft = whichIt.offsetLeft;
  36. whichIt.style.pixelTop = whichIt.offsetTop;
  37. currentX = (event.clientX + document.body.scrollLeft);
  38. currentY = (event.clientY + document.body.scrollTop); 
  39. else { 
  40. window.captureEvents(Event.MOUSEMOVE);
  41. if(checkFocus (e.pageX,e.pageY)) { 
  42. whichIt = document.floater;
  43. StalkerTouchedX = e.pageX-document.floater.pageX;
  44. StalkerTouchedY = e.pageY-document.floater.pageY;
  45. }
  46. return true;
  47. }
  48. function moveIt(e) {
  49. if (whichIt == null) { return false; }
  50. if(IE) {
  51. newX = (event.clientX + document.body.scrollLeft);
  52. newY = (event.clientY + document.body.scrollTop);
  53. distanceX = (newX - currentX); distanceY = (newY - currentY);
  54. currentX = newX; currentY = newY;
  55. whichIt.style.pixelLeft += distanceX;
  56. whichIt.style.pixelTop += distanceY;
  57. if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
  58. if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
  59. if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
  60. 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;
  61. event.returnValue = false;
  62. else { 
  63. whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
  64. if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
  65. if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
  66. if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
  67. if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
  68. return false;
  69. }
  70. return false;
  71. }
  72. function dropIt() {
  73. whichIt = null;
  74. if(NS) window.releaseEvents (Event.MOUSEMOVE);
  75. return true;
  76. }
  77. if(NS) {
  78. window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
  79. window.onmousedown = grabIt;
  80. window.onmousemove = moveIt;
  81. window.onmouseup = dropIt;
  82. }
  83. if(IE) {
  84. document.onmousedown = grabIt;
  85. document.onmousemove = moveIt;
  86. document.onmouseup = dropIt;
  87. }
  88. if(NS || IE) action = window.setInterval("heartBeat()",1);
  89. // -->

show.htm

 



制作移动的浮动层




           


              hello
             
           

           

asdfasdfsadf


           

asdfas


           

dfas


           

df


           

as


           

df


           

as


           

df


           

as


           

df


           

asd


           

f


           

asd


           

f


           

asd


           

fa


           

sd


           

asdf


           

as


           

df


           

asd


           

f


           

asd


           

fa


           

sdf


           

a


           

sdf


           

as


           

df


           

as


           

df


           

asdf



 

 

你可能感兴趣的:(js基础)