亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    html5結(jié)合javascript實(shí)現(xiàn)簡(jiǎn)易音樂播放器

    html5結(jié)合javascript實(shí)現(xiàn)簡(jiǎn)易音樂播放器

    我們先來看下最終的實(shí)現(xiàn)效果:

    (學(xué)習(xí)視頻分享:html5視頻教程)

    html5結(jié)合javascript實(shí)現(xiàn)簡(jiǎn)易音樂播放器

    1、HTML代碼

    <div id="music"> 	<div id="container"> 		<h3 id="musicName">一月,銀裝輕舞-紫竹笛韻</h3> 		<img src="image/一月,銀裝輕舞-紫竹笛韻.jpg" id="musicImg"> 		<audio src="./music/一月,銀裝輕舞-紫竹笛韻.mp3" controls id="audio"></audio> 		<div class="btn"> 			<button id="play">play</button> 			<button id="pause">pause</button> 			<button id="prev">prev</button> 			<button id="next">next</button> 		</div> 	</div> </div>
    登錄后復(fù)制

    2、播放暫停切換效果實(shí)現(xiàn)

    // 播放 play.onclick = function(){ 	if(audio.paused){ 		audio.play(); 	} }   // 暫停 pause.onclick = function(){ 	if(audio.played){ 		audio.pause(); 	} }
    登錄后復(fù)制

    自動(dòng)切換下一首

    audio.addEventListener('ended',function(){ 	next.onclick(); },false);
    登錄后復(fù)制

    3、歌曲切換時(shí)歌曲圖片與當(dāng)前背景也隨著改變

    // 上一首 prev.onclick = function(){ 	num = (num + len - 1) % len; 	audio.src = './music/' + music[num] + '.mp3'; 	musicName.innerHTML = music[num]; 	bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)'; 	musicImg.src = './image/' + music[num] + '.jpg'; 	audio.play(); }   // 下一首 next.onclick = function(){ 	num = (num + 1) % len; 	audio.src = './music/' + music[num] + '.mp3'; 	musicName.innerHTML = music[num]; 	bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)'; 	musicImg.src = './image/' + music[num] + '.jpg'; 	audio.play(); }
    登錄后復(fù)制

    4、實(shí)現(xiàn)背景圖片透明,內(nèi)容不透明效果

    #music { 	width: 500px; 	height: 500px; 	border-radius: 10px; 	margin: 20px auto; 	position: relative; 	background: url(./image/一月,銀裝輕舞-紫竹笛韻.jpg) no-repeat; 	background-size: cover; 	text-align: center; } #container { 	position: absolute; 	left: 0; 	right: 0; 	top: 0; 	bottom: 0; 	width: 500px; 	height: 500px; 	text-align: center; 	background:rgba(255,255,255,0.6); }
    登錄后復(fù)制

    相關(guān)推薦:html5教程

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)