经验分享程序开发文档资料数据资源其它资源

jquery页面引导提示用户操作js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery页面引导提示用户操作js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery页面引导提示用户操作js代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery页面引导提示用户操作</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<div class="headeline"></div>
<!--演示内容开始-->
<script type="text/javascript" src="js/guide.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:url(images/paper.jpg);}
#guide-step{width:952px;height:1106px;overflow:hidden;margin:0px auto;background:url(images/23458867.png) no-repeat;position:relative;}
/* tipbar */
.tipSwitch,.tipbox,.tipword,.progress li,.tipbar .arrow,.tipBarword{background:url(images/guidebg.png) no-repeat;}
#searchTip{overflow:hidden;}
.tipbox{width:290px;position:relative;height:190px;display:none;background-position:0 0;}
.tipbox .tipboxBtn{position:absolute;display:inline-block;width:25px;height:25px;left:236px;top:36px;cursor:pointer;}
.tipboxNextbtn{position:absolute;display:inline-block;width:82px;height:28px;left:159px;top:127px;cursor:pointer;}
.progress{position:absolute;left:71px;top:136px;width:60px;height:9px;line-height:9px;font-size:0px;}
.progress li{float:left;width:9px;height:9px;margin-right:6px;font-size:0px;background-position:-635px -82px;}
.progress .on{background-position:100% -82px;}
.tipword{position:absolute;}
#step1{z-index:1005;}
#step2{z-index:1004;}
#step3{z-index:1003;}
#step4{z-index:1002;}
#step1 .tipword{width:175px;height:56px;left:55px;top:60px;background-position:0 -217px;}
#step2 .tipword{width:212px;height:56px;left:36px;top:65px;background-position:-175px -217px;}
#step3 .tipword{width:195px;height:56px;left:46px;top:60px;background-position:-388px -217px;}
#step4 .tipword{width:210px;height:56px;left:43px;top:44px;background-position:0 -272px;}
#step4{width:290px;height:190px;background-position:-294px 0;}
#step4 .tipboxBtn{left:252px;top:20px;}
#step4 .tipboxNextbtn{left:84px;top:109px;}
.tipbarwrap{position:absolute;width:100%;height:1px;left:0px;top:0px;z-index:1000;background-color:transparent;}
.tipbardiv{position:relative;width:900px;height:1px;margin:0px auto;}
.tipbar{display:none;position:absolute;z-index:1000;}
.tipbarInner{position:relative;}
.tipbar .arrow{width:70px;height:46px;background-position:100% 0;position:absolute;}
.tipBarword{position:absolute;}
#tipbar1{background:url(images/stepflow-pic.png) no-repeat;width:615px;height:249px;left:93px;top:70px;}
#tipbar1 .arrow{left:284px;top:-42px;}
#tipbar1 .tipBarword{width:62px;height:25px;left:355px;top:-39px;background-position:-84px -192px;}
#tipbar2{background:url(images/stepflow-pic.png) no-repeat 0 -259px;width:768px;height:471px;top:330px;left:33px;}
#tipbar2 .arrow{left:284px;top:-42px;}
#tipbar2 .tipBarword{width:62px;height:24px;left:355px;top:-41px;background-position:-156px -192px;}
.clear{font-size:0px;line-height:0px;height:0px;overflow:hidden;}
#tipbar3{background:url(images/stepflow-pic.png) no-repeat 0px -740px;width:680px;height:280px;left:59px;top:816px;}
#tipbar3 .arrow{left:30px;top:-35px;}
#tipbar3 .tipBarword{width:62px;height:24px;background-position:-235px -192px;left:100px;top:-34px;}
#tipbar1 .tipbarInner{width:615px;height:249px;}
#tipbar2 .tipbarInner{width:768px;height:471px;}
#tipbar3 .tipbarInner{width:680px;height:280px;}
.notip{position:absolute;left:175px;top:112px;}
#notip{vertical-align:middle;}
.notip label{vertical-align:middle;color:#0c5685;}
.tipSwitch{width:80px;height:26px;cursor:pointer;background-position:0 -190px;cursor:pointer;position:absolute;top:15px;right:30px;}
</style>

<div id="guide-step" style="margin-top:-40px;">
	<div style="margin-top:270px;height:10px;line-height:99em;overflow:hidden;" id="stepflow03">
		第二步骤</div>
	<div style="margin-top:530px;height:10px;line-height:99em;overflow:hidden;" id="stepflow04">
		第三步骤</div>
	<div class="tipSwitch"></div>
</div>

<script type="text/javascript">
var tipVisible = GetCookie("tipVisible");
var neverShow = GetCookie("neverShow");
if(tipVisible != "no" && neverShow != "no"){
	showSearchTip();
	setSearchTip();
}
</script>
<!--演示内容结束-->
</body>
</html>

JS代码(guide.js):

$(function(){
	$("#guide-step .tipSwitch").live("click",function(){
	showSearchTip();
	setSearchTip();
	SetCookie("tStatus",1);
}
);
}
)function nextStep(next){
	$(".tipbox").css({
	"visibility":"hidden","display":"none"}
);
	$(".tipbar").hide();
	$("#step" + next).css({
	"visibility":"visible","display":"block"}
);
	$("#tipbar" + (next -1)).show();
	if(next == 2){
	$("#searchTip").css("top","307px");
}
else if(next == 3){
	$("#searchTip").css("top","770px");
}
else{
	$("#searchTip").css("top","630px");
}
if(next == 4){
	$(".tipSwitchAnimate").css("top","539px");
}
else if(next == 6){
	$(".tipSwitchAnimate").css("top","357px");
}
else{
	$(".tipSwitchAnimate").css("top","352px");
}
$(".tipSwitchAnimate").css("left","410px");
}
//关闭提示框function hideTip(){
	$("#searchTipBg").hide();
	$("#searchTip").hide();
	$(".tipbar").hide();
	$(".tipbox").css({
	"visibility":"hidden","display":"none"}
);
	$("#step1").css({
	"visibility":"visible","display":"block"}
);
	SetCookie("tipVisible","no");
	$(".tipSwitchAnimate").show().animate({
	"left":"815px","top":"15px"}
,500,function(){
	$(".tipSwitchAnimate").css({
	"left":"410px","top":"15px"}
).hide();
}
);
}
function setSearchTip(){
	var windowW = $(window).width(),windowH = $(window).height(),width = $("#searchTip").width(),ml = width/2;
	if($("#searchTip").length > 0 && $("#searchTipBg").length > 0){
	if($.browser.msie && $.browser.version == '6.0' && !$.support.style){
	var scrollT = $(window).scrollTop(),scrollL = $(window).scrollLeft();
	$("#searchTipBg").css({
	"width":windowW + scrollL,"height":windowH + scrollT}
);
}
else{
	$("#searchTipBg").css({
	"width":windowW,"height":windowH}
);
}
$("#searchTip").css({
	"margin-left":-ml}
);
}
}
function noShow(){
	if(document.getElementById("notip").checked){
	SetCookie("neverShow","no",{
	expires:37230}
);
}
}
function showSearchTip(){
	var position = $.browser.msie && $.browser.version == '6.0' && !$.support.style ? "absolute":"fixed";
	var searchTipBar = "<div class='tipbarwrap'><div class='tipbardiv'>";
	searchTipBar += "<div class='tipbar' id='tipbar1'><div class='tipbarInner'><div class='arrow'></div><div class='tipBarword'></div></div></div>";
	searchTipBar += "<div class='tipbar' id='tipbar2'><div class='tipbarInner'><div class='arrow'></div><div class='tipBarword'></div></div></div>";
	searchTipBar += "<div class='tipbar' id='tipbar3'><div class='tipbarInner'><div class='arrow'></div><div class='tipBarword'></div></div></div>";
	searchTipBar += "</div></div>";
	var searchTipInner = "<div class='tipbox' id='step1'><div class='tipword'></div><span class='tipboxBtn' onclick='hideTip()'></span><span class='tipboxNextbtn' onclick='nextStep(2)'></span><ol class='progress'><li class='on'></li><li></li><li></li><li></li></ol></div>";
	searchTipInner += "<div class='tipbox' id='step2'><div class='tipword'></div><span class='tipboxBtn' onclick='hideTip()'></span><a href='#stepflow03' class='tipboxNextbtn' onclick='nextStep(3)'></a><ol class='progress'><li></li><li class='on'></li><li></li><li></li></ol></div>";
	searchTipInner += "<div class='tipbox' id='step3'><div class='tipword'></div><span class='tipboxBtn' onclick='hideTip()'></span><a href='#stepflow04' class='tipboxNextbtn' onclick='nextStep(4)'></a><ol class='progress'><li></li><li></li><li class='on'></li><li></li></ol></div>";
	searchTipInner += "<div class='tipbox' id='step4'><div class='tipword'></div><span class='tipboxBtn' onclick='hideTip()'></span><span class='tipboxNextbtn' onclick='hideTip();
	noShow()'></span><div class='notip'><input type='checkbox' id='notip' /><label for='notip'>不再提示</label></div></div>";
	var switchBtn = "<div class='tipSwitchAnimate tipSwitch' style='display:none;
	left:410px;
	top:353px;
	'></div>";
	if($("#searchTip").length == 0){
	$("#guide-step").before("<div id='searchTipBg' style='width:100%;
	height:100%;
	left:0px;
	top:0px;
	z-index:999;
	background-color:#000;
	opacity:0.55;
	filter:alpha(opacity=55);
	position:"+ position +"'></div>");
	$("#guide-step").before("<div id='searchTip' style='left:50%;
	top:270px;
	z-index:1005;
	background-color:transparent;
	position:absolute;
	'>"+ searchTipInner +"</div>");
	$("#guide-step").before(searchTipBar);
	$(switchBtn).appendTo($(".tipbardiv"));
	$("#step1").css({
	"visibility":"visible","display":"block"}
);
	if(GetCookie("tipVisible") == "no" || GetCookie("neverShow") == "no"){
	$("#step4 .notip").hide();
}
}
if($("#searchTip").css("display") == "none"){
	$("#searchTip").css("top","270px").show();
	$("#searchTipBg").show();
	$(".tipbox").css({
	"visibility":"hidden","display":"none"}
);
	$("#step1").css({
	"visibility":"visible","display":"block"}
);
}
if($(".tipbarwrap").css("display") == "none"){
	$(".tipbarwrap").show();
}
}
function GetCookie(name){
	var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;
	]*)(;
	|$)"));
	if(arr != null) return decodeURIComponent(arr[2]);
	return null;
}
function SetCookie(name,value,options){
	var expires = '',path = '',domain = '',secure = '';
	if(options){
	if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)){
	var exp;
	if (typeof options.expires == 'number'){
	exp = new Date();
	exp.setTime(exp.getTime() + options.expires*24*60*60*1000);
}
else{
	exp = options.expires;
}
expires = ';
	expires=' + exp.toUTCString();
}
path = options.path ? ';
	path=' + options.path:'';
	domain = options.domain ? ';
	domain=' + options.domain:'';
	secure = options.secure ? ';
	secure':'';
}
document.cookie = [name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');
}

CSS代码(style.css):

@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
255.62 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
255.62 KB
立即下载
严丽
了解
打赏作者 鼓励作者
jquery特效8
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章