jQuery黑色个性的侧边悬浮音乐播放器插件



165 659 220



特效描述:jQuery 黑色个性的 侧边悬浮 音乐播放器插件,jQuery mp3音乐播放器插件制作黑色个人的音乐网站侧边悬浮的音乐播放器列表代码。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/player.js"></script>
<script src="js/playlist.js"></script>
<script src="js/player_database.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/player.js"></script>
<script src="js/playlist.js"></script>
<script src="js/player_database.js"></script>

3. HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>SmartMusticPlugin</title>
		<!--播放器样式-->
	</head>
	<body bgcolor="#262626">
		<!-- 左侧播放器 开始-->
		<div id="jp_container_N" class="jp-video jp-video-270p jp-state-playing" role="application" aria-label="media player" style="left: 0px; height: 175px; bottom: 20px;">
			<div class="jp-type-playlist">
				<div id="jquery_jplayer_N" class="jp-jplayer" style="width: 90px; height: 90px;">
					<audio id="jp_audio_0" preload="metadata" src="http://music.163.com/song/media/outer/url?id=31473269.mp3" title="那英"></audio>
					<video id="jp_video_0" preload="metadata" title="那英" style="width: 0px; height: 0px;"></video>
				</div>
				<div class="jp-gui">
					<div class="jp-video-play" style="display: none;">
						<button class="jp-video-play-icon" role="button" tabindex="0">播放</button>
					</div>
					<div class="jp-interface">
						<div class="jp-progress">
							<div class="jp-seek-bar" style="width: 100%;">
								<div class="jp-play-bar" style="overflow: hidden; width: 97.5219%;"></div>
							</div>
						</div>
						<div class="jp-current-time" role="timer" aria-label="time">04:11</div>
						<div class="jp-duration" role="timer" aria-label="duration">04:17</div>
						<div class="jp-controls-holder">
							<div class="jp-controls">
								<button class="jp-previous" role="button" tabindex="0">上一曲</button>
								<button class="jp-play" role="button" tabindex="0">播放</button>
								<button class="jp-next" role="button" tabindex="0">下一曲</button>
								<button class="jp-stop" role="button" tabindex="0">暂停</button>
							</div>
							<div class="jp-volume-controls">
								<button class="jp-mute" role="button" tabindex="0">静音</button>
								<button class="jp-volume-max" role="button" tabindex="0">最大音量</button>
								<div class="jp-volume-bar">
									<div class="jp-volume-bar-value" style="width: 10%;"></div>
								</div>
							</div>
							<div class="jp-toggles">
								<button class="jp-repeat" role="button" tabindex="0">重复</button>
								<button class="jp-shuffle" role="button" tabindex="0">随机</button>
								<!--<button class="jp-full-screen" role="button" tabindex="0">全屏</button>-->
							</div>
						</div>
						<div class="jp-details" style="display: none;">
							<div class="jp-title" aria-label="title">那英</div>
						</div>
					</div>
				</div>
				<div class="jp-playlist">
					<div class="jp-playlist-box" style="height: 80px;">
						<ul style="height: 1000px; display: block; top: 0px;">
							<li>
								<div>
									<a href="javascript:;" class="jp-playlist-item-remove">×</a>
									<a href="javascript:;" class="jp-playlist-item" tabindex="0">默 <span class="jp-artist" style="transform: rotate(180deg);"> - 那英</span></a>
								</div>
							</li>
							<li class="">
								<div>
									<a href="javascript:;" class="jp-playlist-item-remove">×</a>
									<a href="javascript:;" class="jp-playlist-item" tabindex="0">Ellens Gesang III D839 <span class="jp-artist" style="transform: rotate(180deg);"> - Geoffrey Parsons</span></a>
								</div>
							</li>
							<li>
								<div>
									<a href="javascript:;" class="jp-playlist-item-remove">×</a>
									<a href="javascript:;" class="jp-playlist-item" tabindex="0">Fire <span class="jp-artist" style="transform: rotate(180deg);"> - Said The Sky</span></a>
								</div>
							</li>
							<li class="jp-playlist-current" style="display: list-item;">
								<div>
									<a href="javascript:;" class="jp-playlist-item-remove">×</a>
									<a href="javascript:;" class="jp-playlist-item jp-playlist-current" tabindex="0">兰若词 <span class="jp-artist" style="transform: rotate(180deg);"> - 刘亦菲</span></a>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="jp-no-solution" style="display: none;">
					<span style="transform: rotate(180deg);">升级需要</span> 您浏览器赞不支持播放,请更新版本
					<a href="http://get.adobe.com/flashplayer" target="_blank">Flash插件</a>.
				</div>
			</div>
			<!--歌曲列表滚动条-->
			<div class="scrollBar" style="display: block;">
				<div class="bar" style="top: 0px;"></div>
			</div>
			<!--播放器展开隐藏按钮-->
			<button type="button" class="folded_bt" title="点击收缩" id="btnfold" style="top: 52px;">
          <span style="transform: rotate(180deg);"></span>
      </button>
			<div id="listRemove" style="display: block;"></div>
			<!--移除全部歌曲按钮-->
			<div id="listClose"></div>
			<!--歌曲列表展开收缩按钮-->
		</div>
		<!-- 左侧播放器 结束-->
	<!--播放器js-->
	<!--播放器js-->
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 滑动星星打分 收缩展开 展开收缩 收缩 展开 浮动提示框 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 浮动菜单 浮动导航 收缩菜单 收缩导航 按钮控制 播放器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到