css3迷你播放器面板
时间：2021-07-01 10:21:17 帮助过：0人阅读
css3迷你播放器面板是一款仿Mac电脑的窗口风格设计，整个面板分成三部分，顶部由标题和小化、大化以及关闭按钮组成。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>css3迷你播放器面板 - mgtv素材</title>
<script type="text/javascript" charset="UTF-8" src="js/prefixfree.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<style>
body{
padding:0;
margin:0;
background:#cbd4da;
font-size:12px;
}
/*播放器面板容器*/
.box{
width:320px;
margin:100px auto;
background:#fff;
border:solid 1px #979797;
border-radius:6px;/*制作圆角*/
box-shadow:0 0 5px 6px rgba(0,0,0,0.05);/*面板阴影*/
}
/*播放器面板头部*/
.boxt{
height:40px;
line-height:40px;
padding:0 16px;
}
.boxt .minitxt{
font-size:bold 14px Arial;
color:#7e97ab;
}
/*播放器面板左边按钮（仿mac窗口按钮效果）*/
.boxt .circle em{
display:inline-block;
background:#e4e4e4;
border:solid 1px #c7c9cb;
border-radius:8px;
width:12px;
height:12px;
margin-right:8px;
border:none;
border-radius:6px;
cursor: pointer;
}
/*关闭面板按钮*/
.boxt .circle .close{
box-shadow:inset 0px 1px 1px rgba(83,11,8,.5);
background:-*-radial-gradient(top center, circle, #fff, #af2b24, #ec8e89);
}
/*面板最大化按钮*/
.boxt .circle .max{
box-shadow:inset 0px 1px 1px rgba(117,38,27,.5);
background:-*-radial-gradient(top center, circle, #fff, #ce712d, #fcdf7d);
}
/*面板最小化按钮*/
.boxt .circle .min{
box-shadow:inset 0px 1px 1px rgba(34,75,15,.5);
background:-*-radial-gradient(top center, circle, #fff, #74a94e, #bbdd83);
}
/*面板中间内容*/
.boxm{
border:solid 1px #dedede;
border-width:1px 0;
padding:20px 16px;
overflow:hidden;
}
/*面板播放按钮*/
.boxm .boxml{
float:left;
padding-top:5px;
}
/*面板控制按钮基本样式*/
.boxm .boxml .btn{
display:inline-block;
width:45px;
height:40px;
padding-top:5px;
border:none;
border-radius:25px;
text-align:center;
font-size:0;cursor:pointer;
box-shadow:inset 0 1px 1px rgba(100,100,100,.3);
background:-*-linear-gradient(top,#e6e6e6,#f2f1f1);
}
/*font face 制作icon*/
@font-face{
font-family:"playericon";
src:url(font/fontello.eot);
src:url(font/fontello.eot#iefix) format("embedded-opentype"),
url(font/fontello.woff) format("woff"),
url(font/fontello.ttf) format("truetype"),
url(font/fontello.svg) format("svg");
font-weight:normal;
font-style:normal;
}
.btn:after{
font-family:"playericon";
display:inline-block;
width:35px;
height:35px;
border:none;
border-radius:20px;
font-size:18px;
line-height:35px;
text-align:center;
box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);
background:-*-linear-gradient(top,#fff,#e9e9e9);
}
/*播放icon*/
.on:after{
content:"\25B6";
color:#475057;
}
/*停止icon*/
.stop:after{
content:"\25A0";
color:#cf6767;
}
/*中止icon*/
.pause:after{
content:"\2389";
color:#475057;
}
.btn:hover:after{
color:#19a6e4;
box-shadow:0 -1px 0px 1px #ccc;
}
/*面板时间部分*/
.boxm .boxmr{
font-family:Arial;
color:#666;
text-align:right;
overflow: hidden;
}
.boxm .taketime{
font-size:30px;
}
.boxm span{
display:inline-block;
padding:0 10px;
font-size:9px;
-webkit-text-size-adjust:none;
}
/*面板底部样式*/
.boxb{
height:40px;
line-height:40px;
padding:0 16px;
border-top:solid 1px #fff;
background:#eee;
font-size:14px;
font-family:Arial;
color:#999;
border-radius:6px;
}
.fr{float:right;}
</style>
</head>
<body>
<div class="page">
<section class="demo">
<div class="box">
<div class="boxt"><span class="fr minitxt">Mini Player</span><span class="circle"><em class="close"></em><em class="max"></em><em class="min"></em></span></div>
<div class="boxm">
<div class="boxml">
<a class="btn pause" id="controlBtn">on</a>
<a class="btn stop" id="stopBtn">stop</a>
</div>
<div class="boxmr">
<div class="taketime" id="takeTime">00:00:00</div>
<span>HOUR</span><span>MIN</span><span>SEC</span>
</div>
</div>
<div class="boxb"><span class="fr" id="totalTime">01:22:30</span><span>Totel time</span></div>
</div>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//默认播放状态
getTime();
//点击暂停，再点击播放
$("#controlBtn").click(function(){
if($(this).hasClass("pause")){
clearTimeout(t);
$(this).addClass("on").removeClass("pause");
}else if($(this).hasClass("on")){
$(this).addClass("pause").removeClass("on");
t=setTimeout(getTime,1000);
}
});
//点击停止按钮，时间清零
$("#stopBtn").click(function(){
stopPlayer();
});
})
//停止播放
function stopPlayer(){
$("#takeTime").text("00:00:00");
clearTimeout(t);
$("#controlBtn").addClass("on").removeClass("pause");
timer=0;
}
var timer=0;
var t;
//计算播放时间
function getTime(){
clearTimeout(t);
timer+=1;
var count=timer;
hours = Math.floor(count/3600);
count -= hours * 3600;
minutes = Math.floor(count/60)
count -= minutes * 60;
seconds = Math.floor(count);
// 时分秒为单数时、前面加零站位
if(hours < 10)
hours = "0" + hours;
if(minutes < 10)
minutes = "0" + minutes;
if(seconds < 10)
seconds = "0" + seconds;
var result=hours+":"+minutes+":"+seconds;
$("#takeTime").text(result);
t=setTimeout("getTime()",1000);
//播放完成
var totaltime=$("#totalTime").text();
if(result==totaltime){
stopPlayer();
}
}
</script>
</section>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p><br>
<p>来源：<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>