jQuery進度條播放水平時間軸代碼



105 416 139



特效描述: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>jQuery進度條播放水平時間軸代碼</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>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 其他 圖片拖動 圖片拖拽 時間軸 豎直時間軸 橫向時間軸 文字提示框 提示文字 鼠標滑過 鼠標懸停 跟隨鼠標移動 進度條 進度條插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子