網頁特效之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 -wixdistyle. if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop -whichIt.style.pixelHeight - 5)whichIt.style.pixelTop = document.body.offsetHeight + document.body.rollTTop。像素高度- 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.widIt.clip.width)-177. ; 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>