Javascript  »  Animationen  »  Rotating Links

zur Übersicht

Kategorie	Animationen
Bezeichnung	Rotating Links
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	17419 Aufrufe davon 0x gestern
Das Update für NS und Opera von Axel Benkert ist bereits im Code eingebaut. Besten Dank für die Mühe.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <style> <!-- .fly { color: aqua; font-family: arial; font-size: 24px; position: absolute; visibility:hidden; z-index: 2;} .logo { font-family: arial; font-size: 72px; color: #003194; position: absolute; top: 0px; left: 30px; visibility: visible; z-index: 1;} .desc { text-align: center; font-family: arial; font-size: 12px; color: red; position: absolute; top: 220px; left: 15px; width: 400px; visibility: hidden; z-index: 0;} //--> </style> <script language="JavaScript"> <!-- function showObject(object) { object.visibility = VISIBLE; } function hideObject(object) { object.visibility = HIDDEN; } function slideLogo(from, to) { if (from < to) { company.top = (from += 10); setTimeout('slideLogo(' + from + ',' + to + ')', 75); } else initObjects(); } function rotateObjects() { for (var i = 0; i < pos.length; i++) { pos[i] += inc; objects[i].visibility = 'visible'; objects[i].left = (r * Math.cos(pos[i])) + xoff objects[i].top = (r * Math.sin(pos[i])) + yoff; } rotateTimer = setTimeout("rotateObjects()", 70); } function initObjects() { objects = new Array(fly1, fly2, fly3, fly4, fly5, fly6, fly7, fly8, fly9, fly10, fly11, fly12); pos = new Array(); pos[0] = 0; for (var i = 1; i < objects.length; i++) { pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length)); } rotateObjects(); } var objects; var pos; var r = 160; // radius var xoff = 180; // x offset var yoff = 170; // y offset var pi = Math.PI; // get pi var inc = pi / 180; // degrees per rotation cycle (links drehen) // var inc = -(pi / 180); // degrees per rotation cycle (rechts drehen) var objects; // objects to be rotated var pos; // position for objects function rechts() { inc=pi/180; } function links() { inc=-(pi/180); } //--> </script> <p align="center">Rotating Links</b> </p> <div id="fly1" class="fly"> <p><a onMouseOver="showObject(desc1)" onMouseOut="hideObject(desc1)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=allgemeine+Info&part=true">Link 1</a><br> </p> </div><div id="fly2" class="fly"> <p><a onMouseOver="showObject(desc2)" onMouseOut="hideObject(desc2)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Animationen&part=true">Link 2</a><br> </p> </div><div id="fly3" class="fly"> <p><a onMouseOver="showObject(desc3)" onMouseOut="hideObject(desc3)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Fenster&part=true">Link 3</a><br> </p> </div><div id="fly4" class="fly"> <p><a onMouseOver="showObject(desc4)" onMouseOut="hideObject(desc4)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=N%FCtzliches&part=true">Link 4</a><br> </p> </div><div id="fly5" class="fly"> <p><a onMouseOver="showObject(desc5)" onMouseOut="hideObject(desc5)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Rechner&part=true">Link 5</a><br> </p> </div><div id="fly6" class="fly"> <p><a onMouseOver="showObject(desc6)" onMouseOut="hideObject(desc6)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Statusz.+%2F+Textscroller&part=true">Link 6</a><br> </p> </div><div id="fly7" class="fly"> <p><a onMouseOver="showObject(desc7)" onMouseOut="hideObject(desc7)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=System&part=true">Link 7</a><br> </p> </div><div id="fly8" class="fly"> <p><a onMouseOver="showObject(desc8)" onMouseOut="hideObject(desc8)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Texteffekte&part=true">Link 8</a><br> </p> </div><div id="fly9" class="fly"> <p><a onMouseOver="showObject(desc9)" onMouseOut="hideObject(desc9)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Ticker&part=true">Link 9</a><br> </p> </div><div id="fly10" class="fly"> <p><a onMouseOver="showObject(desc10)" onMouseOut="hideObject(desc10)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Uhren+%2F+Kalender&part=true">Link 10</a><br> </p> </div><div id="fly11" class="fly"> <p><a onMouseOver="showObject(desc11)" onMouseOut="hideObject(desc11)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&kategorie=Formulare&part=true">Link 11</a><br> </p> </div><div id="fly12" class="fly"> <p><font color="#C8C891"><a onMouseOver="showObject(desc12)" onMouseOut="hideObject(desc12)" class="LinkInt" href="http://www.jsunity.de/index.php?opencat=JavaScripts&topscripts=true">Link 12</a></font><br> </p> </div><div id="company" class="logo"> <p><a href="http://www.jsunity.de"><img src="http://www.get-allfree.com/jsunity/jswelt_logo2.gif" alt="jswelt_logo2.gif (1356 bytes)" border="0" width="336" height="45"></a></p> </div><div id="desc1" class="desc"> <p><big><font color="#C8C891">Allgemeine Info </font></big></p> </div><div id="desc2" class="desc"> <p><big><font color="#C8C891">Animationen </font></big></p> </div><div id="desc3" class="desc"> <p><big><font color="#C8C891">Fenster </font></big></p> </div><div id="desc4" class="desc"> <p><big><font color="#C8C891">Nützliches </font></big></p> </div><div id="desc5" class="desc"> <p><big><font color="#C8C891">Rechner </font></big></p> </div><div id="desc6" class="desc"> <p><big><font color="#C8C891">Status./Textscroller</font></big></p> </div><div id="desc7" class="desc"> <p><big><font color="#C8C891">System </font></big></p> </div><div id="desc8" class="desc"> <p><big><font color="#C8C891">Texteffekte</font></big></p> </div><div id="desc9" class="desc"> <p><big><font color="#C8C891">Ticker </font></big></p> </div><div id="desc10" class="desc"> <p><big><font color="#C8C891">Uhren & Kalender </font></big></p> </div><div id="desc11" class="desc"> <p><big><font color="#C8C891">Formulare </font></big></p> </div><div id="desc12" class="desc"> <p><big><font color="#C8C891">Top Scripts </font></big></p> </div> <script language="JavaScript"> <!-- if (document.getElementById) { var fly1 = eval(document.getElementById("fly1").style); var fly2 = eval(document.getElementById("fly2").style); var fly3 = eval(document.getElementById("fly3").style); var fly4 = eval(document.getElementById("fly4").style); var fly5 = eval(document.getElementById("fly5").style); var fly6 = eval(document.getElementById("fly6").style); var fly7 = eval(document.getElementById("fly7").style); var fly8 = eval(document.getElementById("fly8").style); var fly9 = eval(document.getElementById("fly9").style); var fly10 = eval(document.getElementById("fly10").style); var fly11 = eval(document.getElementById("fly11").style); var fly12 = eval(document.getElementById("fly12").style); var HIDDEN = "hidden"; var VISIBLE = "visible"; var company = eval(document.getElementById("company").style); var desc1 = eval(document.getElementById("desc1").style); var desc2 = eval(document.getElementById("desc2").style); var desc3 = eval(document.getElementById("desc3").style); var desc4 = eval(document.getElementById("desc4").style); var desc5 = eval(document.getElementById("desc5").style); var desc6 = eval(document.getElementById("desc1").style); var desc1 = eval(document.getElementById("desc6").style); var desc7 = eval(document.getElementById("desc7").style); var desc8 = eval(document.getElementById("desc8").style); var desc9 = eval(document.getElementById("desc9").style); var desc10 = eval(document.getElementById("desc10").style); var desc11 = eval(document.getElementById("desc11").style); var desc12 = eval(document.getElementById("desc12").style); } else if (document.all) { var fly1 = eval("document.all.fly1.style"); var fly2 = eval("document.all.fly2.style"); var fly3 = eval("document.all.fly3.style"); var fly4 = eval("document.all.fly4.style"); var fly5 = eval("document.all.fly5.style"); var fly6 = eval("document.all.fly6.style"); var fly7 = eval("document.all.fly7.style"); var fly8 = eval("document.all.fly8.style"); var fly9 = eval("document.all.fly9.style"); var fly10 = eval("document.all.fly10.style"); var fly11 = eval("document.all.fly11.style"); var fly12 = eval("document.all.fly12.style"); var HIDDEN = "hidden"; var VISIBLE = "visible"; var company = eval("document.all.company.style"); var desc1 = eval("document.all.desc1.style"); var desc2 = eval("document.all.desc2.style"); var desc3 = eval("document.all.desc3.style"); var desc4 = eval("document.all.desc4.style"); var desc5 = eval("document.all.desc5.style"); var desc6 = eval("document.all.desc6.style"); var desc7 = eval("document.all.desc7.style"); var desc8 = eval("document.all.desc8.style"); var desc9 = eval("document.all.desc9.style"); var desc10 = eval("document.all.desc10.style"); var desc11 = eval("document.all.desc11.style"); var desc12 = eval("document.all.desc12.style"); } else if (document.layers) { var fly1 = eval("document.fly1"); var fly2 = eval("document.fly2"); var fly3 = eval("document.fly3"); var fly4 = eval("document.fly4"); var fly5 = eval("document.fly5"); var fly6 = eval("document.fly6"); var fly7 = eval("document.fly7"); var fly8 = eval("document.fly8"); var fly9 = eval("document.fly9"); var fly10 = eval("document.fly10"); var fly11 = eval("document.fly11"); var fly12 = eval("document.fly12"); var HIDDEN = "hide"; var VISIBLE = "show"; var company = eval("document.company"); var desc1 = eval("document.desc1"); var desc2 = eval("document.desc2"); var desc3 = eval("document.desc3"); var desc4 = eval("document.desc4"); var desc5 = eval("document.desc5"); var desc6 = eval("document.desc6"); var desc7 = eval("document.desc7"); var desc8 = eval("document.desc8"); var desc9 = eval("document.desc9"); var desc10 = eval("document.desc10"); var desc11 = eval("document.desc11"); var desc12 = eval("document.desc12"); } slideLogo(0, 140); //--> </script>

Kommentare zu Rotating Links

0 Kommentar(e) vorhanden / Anzeige der neuesten 5

Noch keine Kommentare zu diesem Javascript vorhanden.


Alle Kommentare anzeigen   -   Kommentar hinzufügen