网页特效之DHTML信息轮显效果

作者：Eve Cole 更新时间：2009-06-20 15:27:10

<html> <head> <title> 跟随滚动条而滚动的广告条</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <STYLE media=screen type=text/css> #floater { 位置：绝对；可见性：可见；宽度：10 像素； Z-INDEX: 10 } </STYLE> <script language="JavaScript">  </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="/u/info_img/2009-06/20/1455_logo.gif" title=怎么样看看效果吧！>< /div> <SCRIPT 语言=JavaScript> self.onError=null;当前X = 当前Y = 0；它 = null;最后滚动X = 0;最后滚动Y = 0; NS = (文档.层) ? 1：0； IE = (文档.全部) ? 1：0；  function heartBeat() { if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } if(diffY != lastScrollY) { 百分比 = .1 * (diffY - lastScrollY); if(百分比 > 0) 百分比 = Math.ceil(百分比);否则百分比 = Math.floor(百分比); if(IE) document.all.floater.style.pixelTop += 百分比； if(NS) document.floater.top += 百分比；最后滚动Y = 最后滚动Y + 百分比； } if(diffX != lastScrollX) { 百分比 = .1 * (diffX - lastScrollX); if(百分比 > 0) 百分比 = Math.ceil(百分比);否则百分比 = Math.floor(百分比); if(IE) document.all.floater.style.pixelLeft += 百分比； if(NS) document.floater.left += 百分比；最后滚动X = 最后滚动X + 百分比； } }   function checkFocus(x,y) { stalkerx = document.floater.pageX;跟踪 = document.floater.pageY; stalkerwidth = document.floater.clip.width; stalkerheight = document.floater.clip.height; if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) 返回 true;否则返回 false； } 函数grabIt(e) { if(IE) { whichIt = event.srcElement; while (whichIt.id.indexOf("floater") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { 返回 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;返回真； } function moveIt(e) { if (whichIt == null) { return false; } } if(IE) { newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop);距离X = (新X - 当前X);距离Y = (新Y - 当前Y);当前X = 新X;当前Y = 新Y； 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。像素高度 - 5；事件.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 ;返回假；返回假； } 函数 dropIt() { whichIt = null; if(NS) window.releaseEvents (Event.MOUSEMOVE);返回真； }  if(NS) { window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); window.onmousedown = 抓住它； window.onmousemove = moveIt; window.onmouseup = dropIt; } if(IE) { document.onmousedown = scrapIt; 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> </body> </html>