jQuery css3動畫分步指引插件guide分步引導頁面功能操作(不兼容IE)



198 790 264



特效描述:動畫分步指引 分步引導 頁面功能操作,jQuery 分步指引插件

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/pageguide.min.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pageguide.min.js"></script>

3. HTML代碼

<div id="examplePlusWelcome">
	<div id="exampleContent">
		<div class="wrapper">
			<h1>引導頁的例子</h1>
			<div class="data-block first_element_to_target">
				<h3>第一</h3>
				<img src="img/img1.jpg" alt="Brisbane"/>
				<p><a href="#" target="_blank">Credit</a></p>
			</div>
			<div class="data-block" id="second_element_to_target">
				<h3>第二</h3>
				<img src="img/img2.jpg" alt="Glen Canyon"/>
				<p><a href="#" target="_blank">Credit</a></p>
			</div>
			<div class="data-block third_element_to_target">
				<div class="is_here">
					<h3>第三</h3>
					<img src="img/img3.jpg" alt="London"/>
					<p><a href="#" target="_blank">Credit</a></p>
				</div>
			</div>
			<div class="data-block" id="fourth_element_to_target">
				<h3>第四</h3>
				<img src="img/img4.jpg" alt="Paros"/>
				<p><a href="#" target="_blank">Credit</a></p>
			</div>
		</div>
		<ul id="tlyPageGuide" data-tourtitle="用一個標題替換這個">
			<li class="tlypageguide_left" data-tourtarget=".first_element_to_target">這是第一項描述。數量將會出現左邊的元素。</li>
			<li class="tlypageguide_right" data-tourtarget="#second_element_to_target">這是第二個項目描述。數量將會出現右邊的元素。</li>
			<li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">這是第三項的描述。上面的數量將會出現的元素。</li>
			<li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">這是第四項描述。將出現下面的元素數量。</li>
		</ul>
	</div>
	<div id="tlyPageGuideWelcome">
		<p>歡迎來到我的新頁面!頁指南來幫助你學習更多的知識。</p>
		<button class="tlypageguide_start">現在開始</button>
		<button class="tlypageguide_ignore">現在不行</button>
		<button class="tlypageguide_dismiss">明白了,謝謝</button>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
	var pageguide = tl.pg.init();
});
</script>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滑動選項卡 滑動切換 滾動切換 滾動條切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 浮動提示框 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 浮動菜單 浮動導航 帶標題的焦點圖 滾動切換 滾動條切換 圖片滾動 圖片滾動條 選項卡自動切換 步驟
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子