Phiên bản đầy đủ: jsB@nk » Scrollers » Chữ di chuyển trong khung
URL: https://www.javascriptbank.com/omni-directional-scrolling-window.html
Hiệu ứng tạo chữ di chuyển theo các hướng khác nhau khi rê con trỏ chuột vào các hướng chỉ được định nghĩa.
Phiên bản đầy đủ: jsB@nk » Scrollers » Chữ di chuyển trong khung
URL: https://www.javascriptbank.com/omni-directional-scrolling-window.html
<script type="text/javascript"> var xOffSet = 5; var yOffSet = 5; Font = 'face="Arial, Verdana, Helvetica, sans-serif" size=2'; NN = (navigator.appName == "Netscape"); IE = (navigator.appName == "Microsoft Internet Explorer"); var object; var over = false; var table; function Create(WhichDir) { switch(WhichDir) { case 'North': if (IE) { document.writeln(' '); document.writeln('North'); document.writeln(' '); } else if (NN) { document.writeln(' '); document.writeln('North'); document.writeln(' '); } break; case 'East' : if (IE) { document.writeln('<br /><br /><br />'); } else if (NN) { document.writeln('<br /><br />'); } document.writeln(' E <br />'); document.writeln(' a <br />'); document.writeln(' s <br />'); document.writeln(' t <br />'); document.writeln('<br /><br /><br />'); break; case 'South': if (IE) { document.writeln(' '); document.writeln('South'); document.writeln(' '); } else if (NN) { document.writeln(' '); document.writeln('South'); document.writeln(' '); } break; case 'West' : if (IE) { document.writeln('<br /><br /><br />'); } else if (NN) { document.writeln('<br /><br />'); } document.writeln(' W <br />'); document.writeln(' e <br />'); document.writeln(' s <br />'); document.writeln(' t <br />'); document.writeln('<br /><br /><br />'); break; } } function Scroll(WhichDir) { var TopNow = 0; var LeftNow = 0; if (IE) { I1 = document.all['ScrollFrame'];// I2 = I1.contentWindow.document.body.innerHTML;// I2 = I1.contentWindow.document.all['Inner'].innerHTML; TopNow = parseInt(I1.contentWindow.document.all['Inner'].style.top); LeftNow = parseInt(I1.contentWindow.document.all['Inner'].style.left); } else if (NN) { I1 = document.getElementById("ScrollFrame");// I2 = I1.contentDocument.body.innerHTML;// I2 = I1.contentDocument.getElementById("Inner").innerHTML; TopNow = parseInt(I1.contentDocument.getElementById("Inner").style.top); LeftNow = parseInt(I1.contentDocument.getElementById("Inner").style.left); } switch(WhichDir) { case 'North': TopNow += yOffSet; break; case 'NE' : TopNow += yOffSet; LeftNow += xOffSet; break; case 'East' : LeftNow -= xOffSet; break; case 'SE' : TopNow -= yOffSet; LeftNow -= xOffSet; break; case 'South': TopNow -= yOffSet; break; case 'SW' : TopNow -= yOffSet; LeftNow += xOffSet; break; case 'West' : LeftNow += xOffSet; break; case 'NW' : TopNow += yOffSet; LeftNow -= xOffSet; break; } if (IE) { I1.contentWindow.document.all['Inner'].style.top = TopNow; I1.contentWindow.document.all['Inner'].style.left = LeftNow; } else if (NN) { I1.contentDocument.getElementById("Inner").style.top = TopNow; I1.contentDocument.getElementById("Inner").style.left = LeftNow; } STI = eval("setTimeout(\"Scroll('" + WhichDir + "')\", 100)"); } function Switch(TheDiv, TheOver, TheWay) { if (IE) { the_div = document.all[TheDiv]; the_over = document.all[TheOver]; } else if (NN) { the_div = document.getElementById(TheDiv); the_over = document.getElementById(TheOver); } if (TheWay == 'Over') { the_div.style.visibility = "hidden"; the_over.style.visibility = "visible"; } else if (TheWay == 'Back') { the_div.style.visibility = "visible"; the_over.style.visibility = "hidden"; } } </script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><table cellspacing="0" cellpadding="0" width="366"> <!--border="yes">--> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <tbody><tr><td align="left" valign="top" width="28"> <div id="NWDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NWDiv', 'NWOver', 'Over'); Scroll('NE');" onmouseout="Switch('NWDiv', 'NWOver', 'Back');"> NW </div> <div id="NWOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NWDiv', 'NWOver', 'Over');" onmouseout="Switch('NWDiv', 'NWOver', 'Back'); clearTimeout(STI);"> NW </div> </td> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <td align="left" valign="top" width="310"> <div id="NorthDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NorthDiv', 'NorthOver', 'Over'); Scroll('North');" onmouseout="Switch('NorthDiv', 'NorthOver', 'Back');"> <script type="text/javascript">Create('North');</script> North </div> <div id="NorthOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NorthDiv', 'NorthOver', 'Over');" onmouseout="Switch('NorthDiv', 'NorthOver', 'Back'); clearTimeout(STI);"> <script type="text/javascript">Create('North');</script> North </div> </td> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <td align="left" valign="top" width="28"> <div id="NEDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('NEDiv', 'NEOver', 'Over'); Scroll('NW');" onmouseout="Switch('NEDiv', 'NEOver', 'Back');"> NE </div> <div id="NEOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('NEDiv', 'NEOver', 'Over');" onmouseout="Switch('NEDiv', 'NEOver', 'Back'); clearTimeout(STI);"> NE </div> </td> </tr> <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns --> <tr><td width="28"> </td> <td width="310"> </td> <td width="28"> </td> </tr> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <tr><td align="left" valign="top" width="28"> <div id="WestDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('WestDiv', 'WestOver', 'Over'); Scroll('West');" onmouseout="Switch('WestDiv', 'WestOver', 'Back');"> <script type="text/javascript">Create('West');</script><br><br> W <br> e <br> s <br> t <br><br><br><br> </div> <div id="WestOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('WestDiv', 'WestOver', 'Over');" onmouseout="Switch('WestDiv', 'WestOver', 'Back'); clearTimeout(STI);"> <script type="text/javascript">Create('West');</script><br><br> W <br> e <br> s <br> t <br><br><br><br> </div> </td> <!-- TD tag needs VALIGN="TOP" to properly align DIV vertically --> <td width="310"> <iframe id="ScrollFrame" name="ScrollBox" src="IFrameSource.html" hspace="0" vspace="0" marginwidth="5" marginheight="5" scrolling="no"> </iframe> </td> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <td align="left" valign="top" width="28"> <div id="EastDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('EastDiv', 'EastOver', 'Over'); Scroll('East');" onmouseout="Switch('EastDiv', 'EastOver', 'Back');"> <script type="text/javascript">Create('East');</script><br><br> E <br> a <br> s <br> t <br><br><br><br> </div> <div id="EastOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('EastDiv', 'EastOver', 'Over');" onmouseout="Switch('EastDiv', 'EastOver', 'Back'); clearTimeout(STI);"> <script type="text/javascript">Create('East');</script><br><br> E <br> a <br> s <br> t <br><br><br><br> </div> </td> </tr> <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns --><!-- <tr><td> </td> <td> </td> <td> </td> </tr>--> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <tr><td align="left" valign="top" width="28"> <div id="SWDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SWDiv', 'SWOver', 'Over'); Scroll('SW');" onmouseout="Switch('SWDiv', 'SWOver', 'Back');"> SW </div> <div id="SWOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SWDiv', 'SWOver', 'Over');" onmouseout="Switch('SWDiv', 'SWOver', 'Back'); clearTimeout(STI);"> SW </div> </td> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <td align="left" valign="top" width="310"> <div id="SouthDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SouthDiv', 'SouthOver', 'Over'); Scroll('South');" onmouseout="Switch('SouthDiv', 'SouthOver', 'Back');"> <script type="text/javascript">Create('South');</script> South </div> <div id="SouthOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SouthDiv', 'SouthOver', 'Over');" onmouseout="Switch('SouthDiv', 'SouthOver', 'Back'); clearTimeout(STI);"> <script type="text/javascript">Create('South');</script> South </div> </td> <!-- TD tag needs ALIGN="LEFT" and VALIGN="TOP" to properly align DIV vertically --> <td align="left" valign="top" width="28"> <div id="SEDiv" class="custom" style="position: absolute; visibility: visible;" onmouseover="Switch('SEDiv', 'SEOver', 'Over'); Scroll('SE');" onmouseout="Switch('SEDiv', 'SEOver', 'Back');"> SE </div> <div id="SEOver" class="over" style="position: absolute; visibility: hidden;" onmouseover="Switch('SEDiv', 'SEOver', 'Over');" onmouseout="Switch('SEDiv', 'SEOver', 'Back'); clearTimeout(STI);"> SE </div> </td> </tr> <!-- Follow each DIV row with a row of &NBSP; to properly separate rows and columns --> <tr><td width="28"> </td> <td width="310"> </td> <td width="28"> </td> </tr> </tbody></table><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->