colorizer是一款可以創(chuàng)建黑膠唱片風(fēng)格音頻播放器的jQuery插件。該插件通過jQuery來驅(qū)動(dòng)音頻的播放，并使用CSS3來制作唱片機(jī)的動(dòng)畫特效。

使用方法

在頁面中引入jquery和colorizer.js文件。

HTML結(jié)構(gòu)

使用下面的HTML結(jié)構(gòu)來構(gòu)建一個(gè)唱片機(jī)播放器。

CSS樣式

為唱片機(jī)使用下面的CSS樣式。

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

}

}

初始化插件

在頁面DOM元素加載完畢之后，通過下面的方法來初始化該音頻播放插件。

$.colorizer("div.colorizer", {

file: "Shahre_Man.mp3",

shadow: ".colorizer",

echolizer: ".echolizer"

});

總結(jié)

以上是生活随笔為你收集整理的html唱片机效果,黑胶唱片风格音频播放器jQuery插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。