Kod untuk melaksanakan pemain muzik (html5 css3 jquery)

Kod untuk melaksanakan pemain muzik (html5 css3 jquery)_jquery

WBOY

Lepaskan： 2016-05-16 15:47:30

asal

2299 orang telah melayarinya

Lihat rendering di bawah, ia kelihatan hebat. Bagaimana ia dicapai? Sekarang saya akan berkongsi dengan anda beberapa khazanah saya, episod rentak malaikat yang dinyanyikan oleh Lisa. Gunakan html5, css dan jquery untuk melaksanakan pemain muzik ini.

Harta karun, selingan rentak malaikat yang dinyanyikan oleh Lisa

Akhir sekali, sebelum menerangkan secara ringkas cara menulis perkara ini, saya seorang lelaki berusia 24 tahun, berasal dari Shanghai Saya sedang mencari teman wanita. . . (Tinggalkan 500 patah perkataan)

<div class="Music">
 <div class="MusicPlaySound"> 
 <img class="MusicPlayBg" src="image/music/zsy.png" /> 
 <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" />
 <div class="MusicPlayBox">
  <h3 class="title">一番の宝物</h3>
  <p class="name">Lisa(Yui final ver)</p>
  <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div>
  <div class="Share icon">分享</div>
  <div class="Next icon">切歌</div>
 </div>
 </div>
 <audio src="music/Yuiki.mp3" autoplay=""></audio>
</div>

Salin selepas log masuk

Bahagian html hanya dilangkau. . . . Pada asasnya saya boleh menulis. . .

.MusicPlayProcess.rotate{animation:rotate 30s infinite linear;}
.MusicPlayProcess.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
.MusicPicName.PicNameRotate{animation:rotate 4s infinite linear;}
.MusicPicName.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}
@keyframes rotate{
 from{ transform:rotate(0deg)}
 to{ transform:rotate(360deg)}
}

Salin selepas log masuk

Pilih sesuatu yang menarik untuk bahagian css

Mengenai beberapa animasi css3 ini. . . . Yang di atas

Salin kod Kod adalah seperti berikut:

.MusicPlayProcess.putar

{ animasi: putar 30s linear tak terhingga;}

Anda boleh menukar 30-an ini kepada panjang lagu dan ia akan menjadi bar kemajuan O~HOHOHOHO (Orang malas sentiasa mempunyai cara yang malas)

Infinite, adakah anda tahu main balik tanpa had?

Salin kod Kod adalah seperti berikut:

.MusicPicName.pause{animation-play-state:pased;

-webkit-animation-play-state:pased;}

Kemudian jeda animasi,,,,

Keserasian adalah cacat, tetapi tiada yang lain

$(function(){
 var play=1;
 $(".MusicPicButton").click(function(){
 if(play==0){
  $(this).attr("src","image/music/pause.png")
  $(".MusicPlayProcess").removeClass("pause")
  $(".MusicPicName").removeClass("pause") 
  $("audio").get(0).play();
  play=1;
 }else{
  $(this).attr("src","image/music/play.png")
  $(".MusicPlayProcess").addClass("pause")
  $(".MusicPicName").addClass("pause") 
  play=0;
  $("audio").get(0).pause();
 }
 })
})

Salin selepas log masuk

Ini bahagian Jq

Main pasti status semasa ialah 1 main 0 dijeda

Salin kod Kod adalah seperti berikut:

$("audio").get(0).play();

$("audio").get(0).pause();

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.