jQuery橫向滾動時間軸特效



128 508 170



特效描述:jQuery 橫向滾動 時間軸特效,jQuery橫向滾動時間軸特效

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/public.css">

2. 引入JS

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

3. HTML代碼

<div class="about-history" id="fzlc">
    <header class="about-title title-white">
        <h3 class="wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;">發展歷程</h3>
        <p class="wow fadeInUp" data-wow-delay=".2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">HISTORY</p>
    </header>
    <div class="about-history-list wow zoomIn" data-wow-delay=".4s" style="visibility: visible; animation-delay: 0.4s; animation-name: zoomIn;">		
        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides clearfix list" style="width: 2600%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2017</h3>
                        <div class="desc">
                            <p>
                            公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。
                            </p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2016</h3>
                        <div class="desc">
                            <p>
                            公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。
                            </p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2015</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2014</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2013</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2012</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2011</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2010</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2009</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2008</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2007</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;">
                    <div class="item">
                        <h3>2006</h3>
                        <div class="desc">
                            <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                        </div>
                    </div>
                </li>
                <li style="width: 253px; float: left; display: block;"></li>
            </ul>
        </div>
        <ul class="flex-direction-nav">
            <li class="flex-nav-prev"><a class="flex-prev" href="#">&lt;</a></li>
            <li class="flex-nav-next"><a class="flex-next" href="#">&gt;</a></li>
         </ul>
    </div>
    <div class="swiper-container about-history-swiper hidden">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="item">
                    <h3>2016</h3>
                    <div class="desc">
                        <p>公司立足于當下商業地產市場形勢,優化自身資源配置,成立中正小雅,完美實現了婚慶產業鏈的高效整合。中正人攜手并進,筑夢遠航,共創輝煌!</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2015</h3>
                    <div class="desc">
                        <p>公司進行大項目組改制,深化管理層次,確定項目組責任制與分紅制,集團凝聚力更上新的臺階。</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2014</h3>
                    <div class="desc">
                        <p>公司省內外業務進入全面發展階段,中杭、中翔、中潤等項目相繼組建,集團公司實現新的跨越。</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2013</h3>
                    <div class="desc">
                        <p>5月,公司相繼成立策劃公司、蘇州分公司、無錫分公司、公司戰略調整,向集團化發展,合并旗下公司成立(杭州中正商業地產管理有限公司)</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2012</h3>
                    <div class="desc">
                        <p>全球金融危機下,公司穩步發展,全年仍創營業額達5億</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2011</h3>
                    <div class="desc">
                        <p>公司版圖不斷擴張,走出浙江省,走出長三角,相繼在安徽、江蘇設立分公司</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="item">
                    <h3>2010</h3>
                    <div class="desc">
                        <p>織里中國童裝城項目單項銷售額達1.68億。以杭州為大本營,面向浙江省,成立諸暨分公司</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-pagination about-history-pagination"></div>
    </div>
</div>
<script>
	$(function(){
		if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
			//phone
		}else{
			//PC
			$(".about-history-list").flexslider({animation:"slide",slideshow:false,controlNav:false,itemWidth:253,itemMargin:31,prevText:"<",nextText:">",move:1});
		}
	});
</script>



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


熱門標簽: 文字疊加 文字層疊 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 文字延遲加載 文字延遲 文字加載 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字切換 文字選項卡 文字滑動 文字滑塊 文字滾動 文字無縫滾動 文字間歇滾動 自動滾動圖片輪播 滑動星星打分 圖片文字 文字導航菜單 文字導航 文字菜單 切換按鈕 日期時間 時鐘 日歷 時間 日歷插件 時間日期插件 表單 表單美化 表單插件 表單美化插件 文字 文字插件 其他 時間軸 豎直時間軸 橫向時間軸 文字滾動 文字無縫滾動 文字間歇滾動 文字列表 按鈕控制 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子