mgtv - 素材

当前位置:Gxlcms > 播放器 > jQuery虾米音乐播放器样式代码

jQuery虾米音乐播放器样式代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

jQuery虾米音乐播放器样式代码 jQuery虾米音乐播放器样式代码是一款基于jquery+html5实现的虾米音乐播放器源码下载。
<head>
<title>jQuery虾米音乐播放器样式代码 - mgtv素材</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" type="text/css" href="css/xiami.css">

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/xiami.js"></script>

</head>
<body>
	<!--模糊画布-->
	<div class="blur">
		<canvas style="width:1366px;height:700px;opacity:0;" width="1366" height="700" id="canvas">
	</div>
	<div class="playerMain">
		<div class="top">
			<a href="#" class="logo"></a>
			<div class="search">
				<div type="submit" class="searchBtn"></div>
				<input type="text" class="searchTxt">
			</div>
			<div class="mainNav">
				<div class="tipLogin">
					马上
					<a href="#" class="loginA">登录</a>
				</div>
				<a href="#" class="myroom"></a>
			</div>
		</div>
		<div class="middle">
			<div class="mainWrap">
				<div class="leftBar">
					<ul class="menuUL">
						<li class="menuLi cur">
							<a href="#">
								<i class="icon iplay"></i>
								正在播放
							</a>
						</li>
						<li class="menuLi">
							<a href="#">
								<i class="icon ihst"></i>
								播放历史
							</a>
						</li>
						<li class="menuLi">
							<a href="#">
								<i class="icon ishouc"></i>
								我收藏的单曲
							</a>
						</li>
					</ul>
					<div class="collectOut">
						<span class="colS">我创建的精选集</span>
						<a href="#" class="colA"></a>
					</div>
					<div class="cellectList"></div>
					<audio id="audio" src="http://zjdx1.sc.chinaz.com/Files/DownLoad/sound1/201507/6065.mp3"></audio>			
				</div>
				<div class="mainBody">
					<div class="playHd">
						<div class="phInner">
							<div class="col">歌曲(50)</div>
							<div class="col">演唱者</div>
							<div class="col">专辑</div>
						</div>
					</div>
					<div class="playBd">
						<div class="scrollView">
							<!-- <div class="scroll"></div> -->
							<ul class="songUL">
								<li class="songList">
									<div class="songLMain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start" >
											<em sonN="1">1</em>
										</div>
										<div class="songBd">
											<div class="col colsn">盛夏光年</div>
											<div class="col colcn">陈冰</div>
											<div class="col">好声音第三季</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more" style="display:none"></a>
											<a class="cicon dele" style="display:none"></a>
										</div>
									</div>									
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start" >
											<em sonN="2">2</em>
										</div>
										<div class="songBd">
											<div class="col colsn">漂洋过海来看你(Live)</div>
											<div class="col colcn">刘明湘</div>
											<div class="col">好声音第三季</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="3">3</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Autobots Reunite</div>
											<div class="col colcn">Steve Jablonsky</div>
											<div class="col">《变形金刚4:绝迹重生》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="4">4</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Halo</div>
											<div class="col colcn">Martin</div>
											<div class="col">Halo Legends: Original Soundtrack</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="5">5</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Pearl White Story</div>
											<div class="col colcn">S.E.N.S</div>
											<div class="col">君に届け 2ND SEASON オリジナル・サウンドトラック</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="6">6</em>
										</div>
										<div class="songBd">
											<div class="col colsn">break the sword of justice</div>
											<div class="col colcn">梶浦由記</div>
											<div class="col">NHKアニメーション 「ツバサ・クロニクル」 オリジナルサウンドトラック Future Soundscape I</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="7">7</em>
										</div>
										<div class="songBd">
											<div class="col colsn">The children</div>
											<div class="col colcn">Ramin Djawadi</div>
											<div class="col">《权力的游戏第四季》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="8">8</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Pacific Rim</div>
											<div class="col colcn">Ramin Djawadi</div>
											<div class="col">《环太平洋》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="9">9</em>
										</div>
										<div class="songBd">
											<div class="col colsn">四つ葉のクローバー</div>
											<div class="col colcn">林有三</div>
											<div class="col">ハチミツとクローバー オリジナルサウンドトラック</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="10">10</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Icarus</div>
											<div class="col colcn">Ivan Torrent</div>
											<div class="col">Icarus</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="11">11</em>
										</div>
										<div class="songBd">
											<div class="col colsn">th3 awak3n1ng</div>
											<div class="col colcn">Ivan Torrent</div>
											<div class="col">Icarus</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList"></li>
							</ul>
						</div>
					</div>
					<div class="playFt">
						<div class="track">
							<div class="uiCheck">
								<input class="checkAll" type="checkbox" select="0">
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itDele">删除</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itShou">收藏</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itJin">添加到精选集</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itMore">更多</a>
							</div>
						</div>
					</div>
				</div>
				<div class="mainOuther">
					<div class="albumCover">
						<a href="#">
							<img src="images/2.jpg" id="canvas1">
						</a>
					</div>
					<div class="albumSale">
						<a href="#" class="asA">
							<img src="">
						</a>
					</div>
					<div id="lyr"></div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="playerWrap">
				<div class="playerCon">
					<a href="#" class="pbtn prevBtn"></a>
					<a href="#" class="pbtn playBtn" isplay="0"></a>
					<a href="#" class="pbtn nextBtn"></a>
					<a href="#" class="mode"></a>
				</div>
				<div class="playInfo">
					<div class="trackInfo">
						<a href="#" class="songName">漂洋过海来看你(Live)</a>
						-
						<a href="#" class="songPlayer">刘明湘</a>
						<div class="trackCon">
							<a href="#" class="tc1"></a>
							<a href="#" class="tc2"></a>
							<a href="#" class="tc3"></a>
						</div>
					</div>
					<div class="playerLength">
						<div class="position">00:00</div>
						<div class="progress">
							<div class="pro1"></div>
							<div class="pro2">
								<a href="#" class="dian"></a>
							</div> 
						</div>
						<div class="duration">03:35</div>
					</div>
				</div>
				<div class="vol">
					<a href="#" class="pinBtn"></a>
					<div class="volm">
						<div class="volSpeaker"></div>
						<div class="volControl">
							<a href="#" class="dian2"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>