Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
71 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 02.08.2020 17:34:28 aktualiesiert
71

Animated wheel navigation with jQuery

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

Demo



Quellcode vom Beispiel

<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>
<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>