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>