Html
    Css
    Js


html {
	height:100%;
}
body {
	height:100%;
}
#player {
	display:none;
}
.ss-player {
	position:fixed;
	left:0;
	bottom:0;
	margin:10px;
	color:#FFF;
}
.ss-player.mini .ss-box {
	width:100px;
	height:100px;
	border-radius:50%;
}
.ss-player.mini .pbcell:nth-child(2),.ss-player.mini .pbcell:nth-child(3) {
	display:none;
}
.ss-box {
	width:500px;
	height:100px;
	background-color:#000;
	overflow:hidden;
	display:table;
	transition:0.5s;
}
.ss-player .btn-ctrl {
	width:40px;
	height:40px;
	margin:10px;
	cursor:pointer;
	display:inline-block;
	background-image:url(http://jq22.qiniudn.com/1gvzgu.svg);
	background-size:100% 100%;
	background-position:center center;
	transition:0.5s;
}
.ss-player .btn-ctrl.pause {
	background-image:url(http://jq22.qiniudn.com/44mnya.svg);
}
.ss-player .timelabel {
	color:#FFF;
	font-size:14px;
}
.ss-player .progressbar {
	width:300px;
	height:4px;
	margin:auto;
	display:inline-block;
	border-radius:2px;
	background-color:rgba(255,255,255,0.2);
	position:relative;
}
.ss-player .currenttime {
	width:0%;
	height:100%;
	background-color:#e60012;
	border-radius:2px;
	position:absolute;
	text-align:right;
	left:0;
	top:0;
}
.ss-player .buffertime {
	width:0%;
	height:100%;
	background-color:rgba(180,180,180,0.5);
	border-radius:2px;
}
.ss-player .currenttime .btn-drag {
	width:6px;
	height:6px;
	border-radius:50%;
	background-color:#e60012;
	border:2px solid #FFF;
	display:inline-block;
	position:absolute;
	right:0px;
	margin-right:-4px;
	top:-2px;
	cursor:pointer;
	transition:0.3s;
}
.ss-player .currenttime .btn-drag:hover {
	box-shadow:0 0 10px 0 rgba(255,255,255,1);
}
.ss-player .pbcell {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.pbcell:nth-child(3) {
	padding:0 10px;
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.8.3
 立即下载

基于jQuery简单的音乐播放器、滑块

$('.ss-player').initdrag({
    range: $('body'),
    bans: $('.ss-player .progressbar,.ss-player .btn-ctrl')
}); //拖动播放器
1
      流水0
      2018/6/1 21:18:26
      老哥,可以加你问问吗
      回复