jquery垂直時間軸鼠標滾動時間軸滾動代碼



146 582 195



特效描述:jquery垂直時間軸 鼠標滾動 時間軸滾動代碼,jquery時間軸代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/history.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/history.js"></script>

3. HTML代碼

<div id="arrow">
	<ul>
		<li class="arrowup"></li>
		<li class="arrowdown"></li>
	</ul>
</div>
<div id="history">
	<div class="title">
		<h2>企業大事記</h2>
		<div id="circle">
			<div class="cmsk"></div>
			<div class="circlecontent">
				<div thisyear="2015" class="timeblock">
					<span class="numf"></span>
					<span class="nums"></span>
					<span class="numt"></span>
					<span class="numfo"></span>
					<div class="clear"></div>
				</div>
				<div class="timeyear">YEAR</div>
			</div>
			<a href="#" class="clock"></a>
		</div>
	</div>
	<div id="content">
		<ul class="list">
			<li style="margin-top:-110px;">
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year">2015</span>
							<span class="md">0905</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#">HTML5 CSS3 發展歷程 發布</a></div>
						<div class="hisct">修正了上一版本中的錯誤,歡迎大家測試,如果發現問題請聯系我們,謝謝。</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year"></span>
							<span class="md">11</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#"></a></div>
						<div class="hisct">隨著用戶的訪問量增大,功能不能滿足需求,我們進行了重大更新,對設計和功能都進行大幅度的升級,增加了原創,欣賞版塊</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year"></span>
							<span class="md">10.05</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#"></a></div>
						<div class="hisct">推出了HTML5 CSS3 官方微博</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year"></span>
							<span class="md">0508</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#"></a></div>
						<div class="hisct">雖然功能還未健全,但是我們已迫不及待的讓它去接受廣大用戶的火眼金睛</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year">2013</span>
							<span class="md">0508</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#">初期討論</a></div>
						<div class="hisct">在集體探討下,發現目前的HTML5 CSS3 發展歷程已經不能滿足需求,集體討論=,這時候,韓老師之前的設計稿被端上了會議桌。</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year">2012</span>
							<span class="md">0701</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#">靈感迸發</a></div>
						<div class="hisct">某天晚上的凌晨三點一刻,預想建立這樣一個功能的網站,專為網頁設計師。</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year">2012</span>
							<span class="md">0524</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#">HTML5 CSS3 發展歷程 上線</a></div>
						<div class="hisct">雖然功能還未健全,但是我們已迫不及待的讓它去接受廣大用戶的火眼金睛</div>
					</div>
				</div>
			</li>
			<li>
				<div class="liwrap">
					<div class="lileft">
						<div class="date">
							<span class="year">2013</span>
							<span class="md">3月1日</span>
						</div>
					</div>
					<div class="point"><b></b></div>
					<div class="liright">
						<div class="histt"><a href="#">初見成效</a></div>
						<div class="hisct">代碼筆記第一版上線</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 時間軸 豎直時間軸 橫向時間軸 時間日期插件 時間日期 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子