<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery带播放进度条水平时间轴 </title>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body style="background-color:#E7E7E7;">
<div class="box">
<div id="progressTime_control" onclick="progressTimeControl(this)" title="开始"></div>
<div class="progressTime" id="progressTime" style="z-index:9">
<div>
<p id="startTime" style=" float:left;margin-left:33px;opacity: 0;display: none;"></p>
<p id="endTime" style=" float:right;margin-right:33px;opacity: 0;display: none;"></p>
</div>
<div class="time_slot">
<p>06</p>
<p>07</p>
<p>08</p>
<p>09</p>
<p>10</p>
</div>
<div id="progressTime_concent">
<div id="scrollBarBox">
<div id="scrollBar">
<div id="scroll_Track"></div>
<div id="scroll_Thumb"></div>
</div>
</div>
<div class="timecode"></div>
<div style="width:90%; margin-left: auto;margin-right: auto;">
<div style="width:300px;float:right;margin-right:-110px;margin-top:-8px">
<p id="TimeSpeed" style="float:left;margin-right:40px;display:none">×1</p>
<p style="float:right" id="scrollBarTxt"></p>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>
