jQuery分步指引介绍特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery分步指引介绍特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->

<title>jQuery�ֲ�ָ��������Ч����</title>
</head>
<body>
<div class="cd-nugget-info">
	<h1>jQuery�ֲ�ָ��������Ч����</h1>
	<button id="cd-tour-trigger" class="cd-btn">�����ʼ</button>
</div>

<ul class="cd-tour-wrapper">
	<li class="cd-single-step">
		<span>���� 1</span>

		<div class="cd-more-info bottom">
			<h2>���� 1</h2>
			<p>���� - ����</p>
			<img src="img/step-1.png" alt="step 1">
		</div>
	</li> <!-- .cd-single-step -->

	<li class="cd-single-step">
		<span>���� 2</span>

		<div class="cd-more-info top">
			<h2>���� 2</h2>
			<p>���� - ����</p>
			<img src="img/step-2.png" alt="step 2">
		</div>
	</li> <!-- .cd-single-step -->

	<li class="cd-single-step">
		<span>���� 3</span>

		<div class="cd-more-info right">
			<h2>���� 3</h2>
			<p>���� - ����</p>
			<img src="img/step-3.png" alt="step 3">
		</div>
	</li> <!-- .cd-single-step -->
</ul> <!-- .cd-tour-wrapper -->

<div class="cd-app-screen"></div>

<div class="cd-cover-layer"></div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile.min.js"></script> 
<script src="js/main.js"></script> <!-- Resource jQuery -->

</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	//check if a .cd-tour-wrapper exists in the DOM - if yes,initialize it$('.cd-tour-wrapper').exists() && initTour();
	function initTour(){
	var tourWrapper = $('.cd-tour-wrapper'),tourSteps = tourWrapper.children('li'),stepsNumber = tourSteps.length,coverLayer = $('.cd-cover-layer'),tourStepInfo = $('.cd-more-info'),tourTrigger = $('#cd-tour-trigger');
	//create the navigation for each step of the tourcreateNavigation(tourSteps,stepsNumber);
	tourTrigger.on('click',function(){
	//start tourif(!tourWrapper.hasClass('active')){
	//in that case,the tour has not been started yettourWrapper.addClass('active');
	showStep(tourSteps.eq(0),coverLayer);
}
}
);
	//change visible steptourStepInfo.on('click','.cd-prev',function(event){
	//go to prev step - if available( !$(event.target).hasClass('inactive') ) && changeStep(tourSteps,coverLayer,'prev');
}
);
	tourStepInfo.on('click','.cd-next',function(event){
	//go to next step - if available( !$(event.target).hasClass('inactive') ) && changeStep(tourSteps,coverLayer,'next');
}
);
	//close tourtourStepInfo.on('click','.cd-close',function(event){
	closeTour(tourSteps,tourWrapper,coverLayer);
}
);
	//detect swipe event on mobile - change visible steptourStepInfo.on('swiperight',function(event){
	//go to prev step - if availableif( !$(this).find('.cd-prev').hasClass('inactive') && viewportSize() == 'mobile' ) changeStep(tourSteps,coverLayer,'prev');
}
);
	tourStepInfo.on('swipeleft',function(event){
	//go to next step - if availableif( !$(this).find('.cd-next').hasClass('inactive') && viewportSize() == 'mobile' ) changeStep(tourSteps,coverLayer,'next');
}
);
	//keyboard navigation$(document).keyup(function(event){
	if( event.which=='37' && !tourSteps.filter('.is-selected').find('.cd-prev').hasClass('inactive') ){
	changeStep(tourSteps,coverLayer,'prev');
}
else if( event.which=='39' && !tourSteps.filter('.is-selected').find('.cd-next').hasClass('inactive') ){
	changeStep(tourSteps,coverLayer,'next');
}
else if( event.which=='27' ){
	closeTour(tourSteps,tourWrapper,coverLayer);
}
}
);
}
function createNavigation(steps,n){
	var tourNavigationHtml = '<div class="cd-nav"><span><b class="cd-actual-step">1</b> of '+n+'</span><ul class="cd-tour-nav"><li><a href="#0" class="cd-prev">&#171;
	Previous</a></li><li><a href="#0" class="cd-next">Next &#187;
	</a></li></ul></div><a href="#0" class="cd-close">Close</a>';
	steps.each(function(index){
	var step = $(this),stepNumber = index + 1,nextClass = ( stepNumber < n ) ? '':'inactive',prevClass = ( stepNumber == 1 ) ? 'inactive':'';
	var nav = $(tourNavigationHtml).find('.cd-next').addClass(nextClass).end().find('.cd-prev').addClass(prevClass).end().find('.cd-actual-step').html(stepNumber).end().appendTo(step.children('.cd-more-info'));
}
);
}
function showStep(step,layer){
	step.addClass('is-selected').removeClass('move-left');
	smoothScroll(step.children('.cd-more-info'));
	showLayer(layer);
}
function smoothScroll(element){
	(element.offset().top < $(window).scrollTop()) && $('body,html').animate({
	'scrollTop':element.offset().top}
,100);
	(element.offset().top + element.height() > $(window).scrollTop() + $(window).height() ) && $('body,html').animate({
	'scrollTop':element.offset().top + element.height() - $(window).height()}
,100);
}
function showLayer(layer){
	layer.addClass('is-visible').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){
	layer.removeClass('is-visible');
}
);
}
function changeStep(steps,layer,bool){
	var visibleStep = steps.filter('.is-selected'),delay = (viewportSize() == 'desktop') ? 300:0;
	visibleStep.removeClass('is-selected');
	(bool == 'next') && visibleStep.addClass('move-left');
	setTimeout(function(){
	( bool == 'next' )? showStep(visibleStep.next(),layer):showStep(visibleStep.prev(),layer);
}
,delay);
}
function closeTour(steps,wrapper,layer){
	steps.removeClass('is-selected move-left');
	wrapper.removeClass('active');
	layer.removeClass('is-visible');
}
function viewportSize(){
	/* retrieve the content value of .cd-main::before to check the actua mq */
return window.getComputedStyle(document.querySelector('.cd-tour-wrapper'),'::before').getPropertyValue('content').replace(/"/g,"").replace(/'/g,"");
}
}
);
	//check if an element exists in the DOMjQuery.fn.exists = function(){
	return this.length > 0;
}

CSS代码(style.css):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{min-height:100%;font-size:1.6rem;font-family:Helvetica,sans-serif;color:#222d33;background-color:#15374d;overflow-x:hidden;}
a{color:#ff962c;text-decoration:none;}
img{max-width:100%;}
/* --------------------------------xnugget info-------------------------------- */
.cd-nugget-info{position:absolute;width:60%;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);z-index:1;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-nugget-info h1{color:#fefffb;font-size:2.4rem;margin:.6em 0;}
.cd-nugget-info .cd-btn{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;border:none;border-radius:50em;background:#ff962c;padding:1em 2em;color:#fefffb;font-weight:bold;font-size:1.4rem;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);}
.cd-nugget-info .cd-btn:active{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);-o-transform:scale(0.9);transform:scale(0.9);}
.no-touch .cd-nugget-info .cd-btn:hover,.cd-nugget-info .cd-btn:focus{outline:none;background:#ffa346;}
@media only screen and (min-width:1100px){.cd-nugget-info h1{font-size:4.2rem;font-weight:300;}
.cd-nugget-info .cd-btn{font-size:1.6rem;}
}
/* --------------------------------Main Components-------------------------------- */
.cd-tour-wrapper{position:fixed;z-index:2;height:90%;width:90%;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);visibility:hidden;opacity:0;-webkit-transition:opacity 0.4s 0s,visibility 0s 0.4s;-moz-transition:opacity 0.4s 0s,visibility 0s 0.4s;transition:opacity 0.4s 0s,visibility 0s 0.4s;}
.cd-tour-wrapper::before{/* never visible - this is used in jQuery to check the current MQ */
 display:none;content:'mobile';}
.cd-tour-wrapper.active{/* start tour */
 visibility:visible;opacity:1;-webkit-transition:opacity 0.4s 0s,visibility 0s 0s;-moz-transition:opacity 0.4s 0s,visibility 0s 0s;transition:opacity 0.4s 0s,visibility 0s 0s;}
@media only screen and (min-width:600px){.cd-tour-wrapper{max-width:500px;max-height:600px;}
}
@media only screen and (min-width:1100px){.cd-tour-wrapper{/* reset style */
 position:absolute;top:0;left:0;height:100%;width:100%;max-width:none;max-height:none;opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-tour-wrapper::before{/* never visible - this is used in jQuery to check the current MQ */
 content:'desktop';}
.cd-tour-wrapper.active{visibility:hidden;}
}
.cd-single-step{/* tour single step */
 position:absolute;z-index:1;width:100%;left:0;top:0;background-color:#fefffb;border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,0.2);opacity:0;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.4s 0s,opacity 0s 0.4s;-moz-transition:-moz-transform 0.4s 0s,opacity 0s 0.4s;transition:transform 0.4s 0s,opacity 0s 0.4s;}
.cd-single-step > span{/* dot indicator - visible on desktop version only */
 position:relative;z-index:1;display:block;width:10px;height:10px;border-radius:inherit;background:#ff962c;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.4s;-moz-transition:-moz-transform 0.4s;transition:transform 0.4s;/* replace text with background images */
 overflow:hidden;text-indent:100%;white-space:nowrap;/* hide on mobile */
 display:none;}
.cd-single-step::after{/* this is used to create the pulse animation */
 content:'';position:absolute;width:100%;height:100%;top:0;left:0;border-radius:inherit;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;/* hide on mobile */
 display:none;}
.active .cd-single-step{/* tour started */
 -webkit-transform:scale(1) translateX(100%);-moz-transform:scale(1) translateX(100%);-ms-transform:scale(1) translateX(100%);-o-transform:scale(1) translateX(100%);transform:scale(1) translateX(100%);-webkit-transition:-webkit-transform 0.4s 0s,opacity 0.4s 0s;-moz-transition:-moz-transform 0.4s 0s,opacity 0.4s 0s;transition:transform 0.4s 0s,opacity 0.4s 0s;}
.active .cd-single-step.move-left{-webkit-transform:scale(1) translateX(-100%);-moz-transform:scale(1) translateX(-100%);-ms-transform:scale(1) translateX(-100%);-o-transform:scale(1) translateX(-100%);transform:scale(1) translateX(-100%);}
.active .cd-single-step.is-selected{/* visible step */
 opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.4s 0s;-moz-transition:-moz-transform 0.4s 0s;transition:transform 0.4s 0s;}
@media only screen and (min-width:1100px){.cd-single-step{/* reset style */
 height:auto;width:auto;top:auto;left:auto;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);border-radius:50%;visibility:hidden;opacity:1;background-color:transparent;box-shadow:none;-webkit-transition:visibility 0s 0.4s;-moz-transition:visibility 0s 0.4s;transition:visibility 0s 0.4s;}
.cd-single-step:nth-of-type(1){/* set tour points positions */
 bottom:40%;right:30%;}
.cd-single-step:nth-of-type(2){bottom:60%;right:48%;}
.cd-single-step:nth-of-type(3){top:28%;left:20%;}
.cd-single-step > span,.cd-single-step::after{display:block;}
.active .cd-single-step,.active .cd-single-step.move-left{-webkit-transition:visibility 0s 0.4s;-moz-transition:visibility 0s 0.4s;transition:visibility 0s 0.4s;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-single-step.is-selected{visibility:visible;-webkit-transition:visibility 0s 0s;-moz-transition:visibility 0s 0s;transition:visibility 0s 0s;}
.cd-single-step.is-selected > span{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
.cd-single-step.is-selected::after{-webkit-animation:cd-pulse 2s infinite;-moz-animation:cd-pulse 2s infinite;animation:cd-pulse 2s infinite;-webkit-animation-delay:0.5s;-moz-animation-delay:0.5s;animation-delay:0.5s;}
.cd-single-step.is-selected .cd-more-info{opacity:1;}
}
@-webkit-keyframes cd-pulse{0%{box-shadow:0 0 0 0 #ff962c;}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0);}
}
@-moz-keyframes cd-pulse{0%{box-shadow:0 0 0 0 #ff962c;}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0);}
}
@keyframes cd-pulse{0%{box-shadow:0 0 0 0 #ff962c;}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0);}
}
.cd-single-step .cd-more-info{z-index:1;padding:1.5em;width:100%;}
.cd-single-step .cd-more-info::after{clear:both;content:"";display:table;}
.cd-single-step .cd-more-info::before{/* triangle next to the step description - hidden on mobile */
 content:'';position:absolute;height:0;width:0;border:6px solid transparent;display:none;}
.cd-single-step .cd-more-info h2{font-size:2rem;line-height:1.2;margin-bottom:.4em;}
.cd-single-step .cd-more-info p{font-size:1.3rem;line-height:1.6;margin-bottom:1.4em;font-family:Georgia,serif;color:#7f7f7d;}
.cd-single-step .cd-more-info img{margin-bottom:1.4em;}
.cd-single-step .cd-more-info .cd-close{/* 'X' icon to skip the tour */
 position:absolute;top:10px;right:10px;width:32px;height:32px;/* replace text with background images */
 overflow:hidden;text-indent:100%;white-space:nowrap;}
.cd-single-step .cd-more-info .cd-close::after,.cd-single-step .cd-more-info .cd-close:before{/* these are the 2 lines of the 'X' icon */
 content:'';position:absolute;left:50%;top:50%;height:2px;width:16px;border-radius:4em;background-color:#cbccc8;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-single-step .cd-more-info .cd-close::after{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);}
.cd-single-step .cd-more-info .cd-close::before{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);transform:translateX(-50%) translateY(-50%) rotate(-45deg);}
.cd-single-step .cd-more-info span{/* step count e.g. 1 of 3*/
 float:left;padding-top:.1em;font-size:1.3rem;font-family:Georgia,serif;}
@media only screen and (min-width:1100px){.cd-single-step .cd-more-info{position:absolute;width:340px;border-radius:4px;box-shadow:0 3px 20px rgba(0,0,0,0.15);opacity:0;background-color:#fefffb;-webkit-transition:opacity 0.4s;-moz-transition:opacity 0.4s;transition:opacity 0.4s;border-color:#fefffb;}
.cd-single-step .cd-more-info p{margin-bottom:2.5em;}
.cd-single-step .cd-more-info img{display:none;}
.cd-single-step .cd-more-info::before{/* triangle next to the step description - hidden on mobile */
 display:block;}
.cd-single-step .cd-more-info.left{right:calc(100% + 15px);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
.cd-single-step .cd-more-info.right{left:calc(100% + 15px);-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
.cd-single-step .cd-more-info.left,.cd-single-step .cd-more-info.right{top:50%;}
.cd-single-step .cd-more-info.top{bottom:calc(100% + 15px);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
.cd-single-step .cd-more-info.bottom{top:calc(100% + 15px);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
.cd-single-step .cd-more-info.top,.cd-single-step .cd-more-info.bottom{left:50%;}
.cd-single-step .cd-more-info.left::before,.cd-single-step .cd-more-info.right::before{top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);}
.cd-single-step .cd-more-info.top::before,.cd-single-step .cd-more-info.bottom::before{left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);}
.cd-single-step .cd-more-info.left::before{border-left-color:inherit;left:100%;}
.cd-single-step .cd-more-info.right::before{border-right-color:inherit;right:100%;}
.cd-single-step .cd-more-info.top::before{border-top-color:inherit;top:100%;}
.cd-single-step .cd-more-info.bottom::before{border-bottom-color:inherit;bottom:100%;}
.is-selected .cd-single-step .cd-more-info{opacity:1;}
}
.cd-tour-nav{float:right;}
.cd-tour-nav::after{clear:both;content:"";display:table;}
.cd-tour-nav li{display:inline-block;float:left;}
.cd-tour-nav li:first-of-type{margin-right:1.5em;}
.cd-tour-nav a{font-size:1.3rem;color:#222d33;font-weight:bold;}
.cd-tour-nav a.inactive{/* item not clickable */
 color:#cbccc8;cursor:not-allowed;}
.cd-cover-layer{/* background cover layer - visible when tour is activated */
 position:fixed;z-index:1;top:0;left:0;height:100%;width:100%;background-color:rgba(0,0,0,0.6);visibility:hidden;opacity:0;-webkit-transition:opacity 0.4s 0s,visibility 0s 0.4s;-moz-transition:opacity 0.4s 0s,visibility 0s 0.4s;transition:opacity 0.4s 0s,visibility 0s 0.4s;}
.cd-cover-layer.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.4s 0s,visibility 0s 0s;-moz-transition:opacity 0.4s 0s,visibility 0s 0s;transition:opacity 0.4s 0s,visibility 0s 0s;}
@media only screen and (min-width:1100px){.cd-cover-layer.is-visible{opacity:0;-webkit-animation:cd-fade-in 2.1s;-moz-animation:cd-fade-in 2.1s;animation:cd-fade-in 2.1s;}
}
@-webkit-keyframes cd-fade-in{0%,100%{opacity:0;}
14%,40%{opacity:1;}
}
@-moz-keyframes cd-fade-in{0%,100%{opacity:0;}
14%,40%{opacity:1;}
}
@keyframes cd-fade-in{0%,100%{opacity:0;}
14%,40%{opacity:1;}
}
/* --------------------------------xapp prototype - no need to import this in production-------------------------------- */
.cd-app-screen{position:absolute;left:50%;top:50%;bottom:auto;right:auto;-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);width:90%;height:80%;background:#222d33;border-radius:4px;box-shadow:0 10px 60px #08151d;}
.cd-app-screen::before,.cd-app-screen::after{content:'';position:absolute;}
.cd-app-screen::before{top:0;left:0;height:40px;width:100%;background:#fefffb;border-radius:4px 4px 0 0;}
.cd-app-screen::after{top:14px;left:20px;height:12px;width:60px;background:#e4e5e1;border-radius:3px;}

附件:下载该文件资源,减少时间成本(增值服务)