Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Animated wheel navigation

Animated wheel navigation

Animierte JavaScript-Bibliothek für die Radnavigation basierend auf Ra phaël.js (SVG / VML). Es funktioniert auf allen gängigen Desktop- und mobilen Browsern. Mögliche Verwendungen: Download-Archiv

Der hier verwendete Code

<!doctype html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/raphael.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/wheelnav@1.7.1/js/dist/wheelnav.min.js"></script> <style> .wheelNav { height: 350px; width: 350px; margin: auto; -moz-transition: ease 1s; -o-transition: ease 1s; -webkit-transition: ease 1s; transition: ease 1s; } .wheelNav > svg { width: 100%; height: 100%; } @media (max-width: 1080px) { .wheelNav { height: 300px; width: 300px; } } @media (max-width: 880px) { .wheelNav { height: 250px; width: 250px; } } @media (max-width: 480px) { .wheelNav { height: 200px; width: 200px; } } </style> </head> <body> <div id="divWheelnav" class="wheelNav"></div> <div name="test" class="wheelNav"></div> <div name="test" class="wheelNav"></div> <div class="wheelNav withoutid"></div> <script> //Initialize wheelnav by id var myWheelnav = new wheelnav("divWheelnav"); myWheelnav.createWheel(["id","id","id","id"]); //Wrapper function for element without an ID attribute var wheelnavWrapper = function (elementwithoutid) { var fakeid = "wheelnav"; var counter = 0; while (document.getElementById(fakeid + counter.toString()) !== null) { counter++; } if (elementwithoutid != null) { if (!elementwithoutid.hasAttribute("id")) { elementwithoutid.setAttribute("id", fakeid + counter.toString()); } return new wheelnav(elementwithoutid.id); } }; //Initialize wheelnav by element var elementsbyname = document.querySelectorAll("div[name=test]"); var wheelnav0 = wheelnavWrapper(elementsbyname[0]); wheelnav0.createWheel(["name","name","name","name"]); var wheelnav1 = wheelnavWrapper(elementsbyname[1]); wheelnav1.createWheel(["name","name","name","name"]); var elementbyclass = document.querySelector("div.wheelNav.withoutid"); var wheelnav2 = wheelnavWrapper(elementbyclass); wheelnav2.createWheel(["class","class","class","class"]); </script> </body> </html>