使用tour对网站进行分步引导 – 业余草_html/css

집

웹 프론트엔드

HTML 튜토리얼

使用tour对网站进行分步引导 – 业余草_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:55 AM

如果你细心的话，你就会发现有部分网站在升级或者注册后，会出现分步引导。引导我们如何使用网站。最常见的应该就是支付宝。那么支付宝是如何实现这样的功能的呢？今天我就为大家介绍bootstrap-tour插件来揭开它的面纱。运行效果如下：

代码如下：

<!DOCTYPE html><html><head>	<meta charset="UTF-8">	<title>使用tour对网站进行分步引导</title>	<link href="http://cdn.gbtags.com/bootstrap-tour/0.9.0/css/bootstrap-tour-standalone.min.css" rel="stylesheet">	<script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>	<script src="http://cdn.gbtags.com/bootstrap-tour/0.9.0/js/bootstrap-tour-standalone.js"></script>	<style type="text/css">		body{ 			background: #f5faff;		}		.demo_con{			width: 960px;			margin:40px auto 0;		}		.button{			width: 140px;			line-height: 38px;			text-align: center;			font-weight: bold;			color: #fff;			text-shadow:1px 1px 1px #333;			border-radius: 5px;			margin:0 20px 20px 0;			position: relative;			overflow: hidden;		}		.button:nth-child(5n){			margin-right: 0;		}		.button.gray{			color: #8c96a0;			text-shadow:1px 1px 1px #fff;			border:1px solid #dce1e6;			box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;			background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);			background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);			background: linear-gradient(top,#f2f3f7,#e4e8ec);		}		.button.black{			border:1px solid #333;			box-shadow: 0 1px 2px #8b8b8b inset,0 -1px 0 #3d3d3d inset,0 -2px 3px #8b8b8b inset;			background: -webkit-linear-gradient(top,#656565,#4c4c4c);			background: -moz-linear-gradient(top,#656565,#4a4a4a);			background: linear-gradient(top,#656565,#4a4a4a);		}		.button.red{			border:1px solid #b42323;			box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;			background: -webkit-linear-gradient(top,#d53939,#b92929);			background: -moz-linear-gradient(top,#d53939,#b92929);			background: linear-gradient(top,#d53939,#b92929);		}		.button.yellow{			border:1px solid #d2a000;			box-shadow: 0 1px 2px #fedd71 inset,0 -1px 0 #a38b39 inset,0 -2px 3px #fedd71 inset;			background: -webkit-linear-gradient(top,#fece34,#d8a605);			background: -moz-linear-gradient(top,#fece34,#d8a605);			background: linear-gradient(top,#fece34,#d8a605);		}		.button.green{			border:1px solid #64c878;			box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;			background: -webkit-linear-gradient(top,#90dfa2,#84d494);			background: -moz-linear-gradient(top,#90dfa2,#84d494);			background: linear-gradient(top,#90dfa2,#84d494);		}		.button.blue{			border:1px solid #1e7db9;			box-shadow: 0 1px 2px #8fcaee inset,0 -1px 0 #497897 inset,0 -2px 3px #8fcaee inset;			background: -webkit-linear-gradient(top,#42a4e0,#2e88c0);			background: -moz-linear-gradient(top,#42a4e0,#2e88c0);			background: linear-gradient(top,#42a4e0,#2e88c0);		}	</style></head><body>	<div class="page">		<section class="demo">			<div class="demo_con">			 				<button type="button" class="button gray" id="btn0">第1步</button>				<button type="button" class="button black" id="btn1">第2步</button>				<button type="button" class="button red" id="btn2">第3步</button>				<button type="button" class="button yellow" id="btn3">第4步</button>				<button type="button" class="button green" id="btn4">第5步</button>				<button type="button" class="button blue" id="btn5">第6步</button>			 				<button type="button" class="button gray" id="btn6">第7步</button>				<button type="button" class="button black" id="btn7">第8步</button>				<button type="button" class="button red"  id="btn8">第9步</button>				<button type="button" class="button yellow"  id="btn9">第10步</button>				<button type="button" class="button green"  id="btn10">第11步</button>				<button type="button" class="button blue"  id="btn11">第12步</button>			 				<button type="button" class="button gray"  id="btn12">第13步</button>				<button type="button" class="button black"  id="btn13">第14步</button>				<button type="button" class="button red"  id="btn14">第15步</button>				<button type="button" class="button yellow"  id="btn15">第16步</button>				<button type="button" class="button green"  id="btn16">第17步</button>				<button type="button" class="button blue"  id="btn17">第18步</button>			 				<button type="button" class="button gray">第19步</button>				<button type="button" class="button black">第20步</button>				<button type="button" class="button red">第21步</button>				<button type="button" class="button yellow">第22步</button>				<button type="button" class="button green">第23步</button>				<button type="button" class="button blue">第24步</button>				<button type="button" class="button gray">第25步</button>			</div>			</section>	</div>    <script type="text/javascript">	    $(document).ready(function(){				    	var tour = new Tour({	    		storage: false,//可选参数：window.localStorage(缺省), window.sessionStorage ，false　或者自定义obj	    		debug:false,//是否调试,默认为false				steps: [					{element: "#btn0",title: "提示0",content: "内容0"},					{element: "#btn1",title: "提示1",content: "内容1"},					{element: "#btn2",title: "提示2",content: "内容2"},					{element: "#btn3",title: "提示3",content: "内容3"},					{element: "#btn4",title: "提示4",content: "内容4"},					{element: "#btn5",title: "提示5",content: "内容5"},					{element: "#btn6",title: "提示6",content: "内容6"},					{element: "#btn7",title: "提示7",content: "内容7"},					{element: "#btn8",title: "提示8",content: "内容8"},					{element: "#btn9",title: "提示9",content: "内容9"},					{element: "#btn10",title: "提示10",content: "内容10"},					{element: "#btn11",title: "提示11",content: "内容11"},					{element: "#btn12",title: "提示12",content: "内容12"},					{element: "#btn13",title: "提示13",content: "内容13"},					{element: "#btn14",title: "提示14",content: "内容14"},					{element: "#btn15",title: "提示15",content: "内容15"},					{element: "#btn16",title: "提示16",content: "内容16"},					{element: "#btn17",title: "提示17",content: "内容17"},					{element: "#btn18",title: "提示18",content: "内容18"},					{element: "#btn19",title: "提示19",content: "内容19"},					{element: "#btn20",title: "提示20",content: "内容20"},					{element: "#btn21",title: "提示21",content: "内容21"},					{element: "#btn22",title: "提示22",content: "内容22"},					{element: "#btn23",title: "提示23",content: "内容23"},					{element: "#btn24",title: "提示24",content: "内容24"},					{element: "#btn25",title: "提示25",content: "内容25"}				],			  	//操作模板			  	template:"<div class='popover'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'>" +			  	"<div class='btn-group'><button class='btn btn-sm btn-default' data-role='prev'>&laquo; 上一步</button><button class='btn btn-sm btn-default' data-role='next'>下一步 &raquo;</button>" +			  	"<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>暂停</button></div><button class='btn btn-sm btn-default' data-role='end'>知道了</button></div></div>"			});	    	//打印出对象，可以设置更多属性，包括键盘控制，箭头指向等	    	console.log(tour);			tour.init();			tour.start();			//分步引导框架还有很多，如：TourTip、Intro.js、aSimpleTour、pageguide.js、Joyride、WEBSITE TOUR、Bootstro.js、Bootstrap Tour、、jQuery Site Tour、jQuery TourBus、Trip.js、Crumble等	    });    </script></body></html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7566

Cakephp 튜토리얼

1386

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

105

Related knowledge

& lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

HTML은 초보자를 위해 쉽게 배우나요? Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML의 시작 태그의 예는 무엇입니까? Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

See all articles