jQuery带播放进度条的水平时间轴效果代码下载

jQuery带播放进度条的水平时间轴效果代码下载

1. 引入CSS

<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</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';">
</div>
</body>
</html>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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