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>
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>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);
}
}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"
});Das Obige ist der Inhalt des jQuery-Plug-ins für den Schallplatten-Audioplayer. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).
