Heim > Web-Frontend > H5-Tutorial > Hauptteil

JQuery-Plugin für einen Audioplayer im Schallplattenstil

黄舟
Freigeben: 2017-01-19 13:38:47
Original
2436 Leute haben es durchsucht

Kurzes Tutorial

Colorizer ist ein jQuery-Plug-in, mit dem ein Audioplayer im Schallplattenstil erstellt werden kann. Dieses Plug-in verwendet jQuery zur Steuerung der Audiowiedergabe und verwendet CSS3 zur Erstellung von Animationseffekten für den Plattenspieler.

Verwendung

Fügen Sie jquery- und colorizer.js-Dateien in die Seite ein.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/colorizer.js"></script>
Nach dem Login kopieren

HTML-Struktur

Verwenden Sie die folgende HTML-Struktur, um einen Plattenspieler zu erstellen.

<div class="audio">
    <div class="echolizer"></div>
    <div class="colorizer"></div>
    <div class="disk"></div>
    <img src="img/cover.jpg">
</div>
Nach dem Login kopieren

CSS-Stile

Verwenden Sie die folgenden CSS-Stile für den Plattenspieler.

body,ul,li{
    margin: 0;
    padding: 0;
}
body{
    background: #333;
}
div.audio{
    position: relative;
    top: 100px;
    left: 100px;
    background: #eee;
    width: 400px;
    height: 400px;
    transition: all 0.3s;
    box-shadow: 33px 24px 10px 0 rgba(0, 0, 0, 0.2);
}
div.colorizer{
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    transition: all 0.3s;
    z-index:3;
}
div.echolizer{
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index:10;
    width: 0;
    height: 4px;
    transition: all 0.3s;
}
div.audio img{
    width: 400px;
}
div.disk{
    background-image: url("../img/cd.png");
    width: 350px;
    height: 350px;
    position: absolute;
    right: -140px;
    background-size: cover;
    z-index:-1;
    top: 34px;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
    border-radius: 50%;
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
Nach dem Login kopieren

Initialisieren Sie das Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, verwenden Sie die folgende Methode, um das Audiowiedergabe-Plug-in zu initialisieren.

$.colorizer("div.colorizer", {
    file: "Shahre_Man.mp3",
    shadow: ".colorizer",
    echolizer: ".echolizer"
});
Nach dem Login kopieren

Das Obige ist der Inhalt des jQuery-Plug-ins für den Schallplatten-Audioplayer. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com).


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage