日本語
<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>閉じるボタンが付いたマウスで移動可能なレイヤー、クールな効果</ TITLE> </HEAD> <BODY> <STYLE type=text/css> #floater { LEFT: 400px; TOP: 120px; Z-INDEX: 10; </STYLE> <DIV align=center id=floater style="HEIGHT: 98px; WIDTH: 240px;"> <TABLE bgColor=#deefef border=1 borderColor=#008000 borderColorDark=#00ff00 borderColorLight=#ff00ff cellPadding=2 cellSpacing =1 width= "240"> <TBODY> <TR> <TD width="100%"> <P align=center>Web サイト構築アカデミーへようこそ<BR>JavaScript コラム! </P></TD></TR> <TR> <TD width="100%"> ウェブサイト構築アカデミーへようこそ。ご意見やご提案がございましたら、お気軽にお寄せください。私たちの成長はあなたの足跡となるでしょう。 ！ ！ <BR> 良い提案や意見があれば、私に書いてください。良い例があれば、相談して学びたいと思います。 </TD></TR></TBODY></TABLE></DIV> <SCRIPT language=JavaScript> currentX = currentY = 0; lastScrollY = 0; NS = (document.layers) 1 : 0; IE = (document.all) 1: 0; <!-- STALKER CODE --> function heartBeat() { diffY = document.body.scrollTop ; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; } if(diffY != lastScrollY) { パーセント = .1 * (diffY - lastScrollY); > 0) パーセント = Math.ceil(パーセント); それ以外の場合 パーセント = Math.floor(パーセント); if(IE) document.all.floater.style.pixelTop += パーセント if(NS) document.floater.top +=パーセント; lastScrollY = lastScrollY + パーセント; } if(diffX != lastScrollX) { パーセント = .1 * (diffX - lastScrollX); パーセント = Math.ceil(パーセント);パーセント); if(IE) document.all.floater.style.pixelLeft += パーセント; if(NS) document.floater.left += パーセント; } } <!-- /STALKER コード -- > <!-- DRAG DROP CODE --> function checkFocus(x,y) { ストーカーx = document.floater.pageX; ストーカー幅 = ドキュメント.フローター.クリップ.幅; .clip.height; if( (x > ストーカーx && x < (ストーカーx+ストーカー幅)) && (y > ストーカー && y < (ストーカー+ストーカー高さ))) true を返す } functiongrabIt(e) { if (IE) { whatIt =event.srcElement; while (thisIt.id.indexOf("floater") == -1) { whatIt = whatIt.parentElement; if (thatIt == null) { return true; } .pixelLeft = whatIt.offsetLeft; whatIt.style.pixelTop = whatIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); } else { ウィンドウ。 CaptureEvents(Event.MOUSEMOVE); if(checkFocus (e.pageX,e.pageY)) { whichIt = document.floater; StalkerTouchedX = e.pageY-document.floater.pageY; ; } } true を返す; } function moveIt(e) { if (thatIt == null) { return false; } if(IE) { newX = (event.clientX + document.body.scrollLeft); + document.body.scrollTop); 距離 X = (新しい X - 現在の Y); どちらの.スタイル.ピクセル左 += 距離 Y; if(どれかIt.style.pixelTop < document.body.scrollTop)どれかIt.style.pixelTop = document.body.scrollTop; if(どれかIt.style.pixelLeft < document.body.scrollLeft)どれかIt.style.pixelLeft = document.body。スクロール左; if(どれかIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft -どれかIt.style.pixelWidth - 20)どれかIt.style.pixelLeft = document.body.offsetWidth -どれかIt.style.pixelWidth - 20; if(thatIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whatIt.style.pixelHeight - 5) whatIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whatIt.style.ピクセル高さ - 5; イベント.returnValue = false; } else { whatIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); if(thatIt.left < 0+self.pageXOffset) pageXOffset; if(thatIt.top < 0+self.pageYOffset) whatIt.top = 0+self.pageYOffset; if( (thatIt.left + whatIt.clip.width) >= (window.innerWidth+self.pageXOffset-17) ) whatIt.left = ((window.innerWidth+self.pageXOffset)-thatIt.clip.width)-17; if( (thatIt.top + whatIt.clip.height) >= (window.innerHeight+self.pageYOffset-17) )) whatIt.top = ((window.innerHeight+self.pageYOffset)-thatIt.clip.height)-17; return false;} return false; } function dropIt() { whatIt = null; (Event.MOUSEMOVE); return true; } <!-- DRAG DROP CODE --> if(NS) { window.onmousedown =grabIt; window.onmouseup = ドロップイット; } if(IE) { document.onmousemove = moveIt; ドキュメント.onmouseup = ドロップイット; } if(NS || IE) アクション = window.setInterval() 1); </SCRIPT> </BODY></HTML>
