您的位置：首页 > Web前端 > HTML

html新手引导

2015-09-16 17:04 567 查看

新手引导实现原理：将说明图片定位到相应位置，按照顺序显示。用绝对定位

1.网页蒙版设置

html{ height:100%}

body{ height:100%}

#mask{ height:100%; width:100%; position:absolute; top:0; left:0; background:#000; opacity:0.5; filter:alpha( opacity=50); display:none}

2.对每个引导图片上的下一步和关闭按钮做链接定位

将引导区隐藏 display:none

3.javascript控制引导单元的显示

4.cookie识别第一次

<!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>无标题文档</title>
<style>
*{ margin:0; padding:0;}
html{ height:100%}
body{ background:url(images/body.png) center top; height:100%}
#mask{ height:100%; width:100%; position:absolute; top:0; left:0; background:#000; opacity:0.5; filter:alpha( opacity=50); display:none}
#searchTip{ width:980px; height:800px; position:absolute; left:50%; margin-left:-490px; display:none}
#searchTip div{ position:absolute; display:none}
#searchTip div a{ position:absolute; width:95px; height:32px; text-indent:-999px; overflow:hidden; cursor:pointer; }
#searchTip div span{ position:absolute; height:30px; width:30px; text-indent:-999px; overflow:hidden; cursor:pointer; }

.stepA{ width:745px; height:329px; background:url(images/guide11.png); top:131px; left:-9px}
.stepA span{top:144px; left:683px}
.stepA a{top:231px; left:490px }

.stepB{ background:url(images/guide21.png); width:647px; height:405px;top:2px; left:324px}
.stepB a{top:308px; left:146px;}
.stepB span{ top:196px; right:285px; }

.stepC{ background:url(images/guide31.png); width:654px; height:257px;top:294px; left:318px}
.stepC a{top:155px; left:400px; }
.stepC span{ top:44px; right:35px; }

.stepD{ background:url(images/guide41.png); width:558px; height:348px;top:78px; left:155px}
.stepD a{top:246px; left:304px;}
.stepD span{ top:135px; right:35px; }

.stepE{ background:url(images/guide51.png); width:397px; height:342px;top:79px; left:250px}
.stepE a{top:245px; left:153px;}
</style>
<script>
window.onload=function(){
var oMask=document.getElementById('mask');
var oSearch=document.getElementById('searchTip');
var aStep=oSearch.getElementsByTagName('div');
var aA=oSearch.getElementsByTagName('a');
var aClose=oSearch.getElementsByTagName('span');
//读取cookie
var res=document.cookie.substring(5);
alert(res);

//如果没有cookie，执行以下动作
if(res!="www.open.com.cn"){
alert(res)
//mask 父框第一单元显示出来
oMask.style.display=oSearch.style.display=aStep[0].style.display='block';

//下一步按钮
for( var i=0; i<aStep.length; i++){
aA[i].index=i; //为每一个按钮增加一个index属性，为后面引用的
aA[i].onclick=function(){
this.parentNode.style.display="none";
if(this.index< aStep.length-1){
aStep[this.index+1].style.display="block";
}
else if( this.index==aStep.length-1){
oMask.style.display=oSearch.style.display="none";
}
}
}
//关闭按钮
for(var i=0; i<aClose.length;i++){
aClose[i].onclick=function(){
oMask.style.display=oSearch.style.display="none";
}
}
//添加cookie
var oDate=new Date();
oDate.setDate(oDate.getDate()+30);
document.cookie="name=www.open.com.cn;expires="+oDate;//给cookie加30天的时效时间
}

}

 //用jquery实现
//$(function(){
//<span style="white-space:pre">	</span>//读取cookie
//<span style="white-space:pre">	</span>var res=document.cookie.substring(5);
//<span style="white-space:pre">	</span>alert(res);
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>//如果没有cookie，执行以下动作
//<span style="white-space:pre">	</span>if(res!="www.open.com.cn"){
//<span style="white-space:pre">		</span>alert(res)
//<span style="white-space:pre">	</span>$('#mask,#searchTip,#searchTip div:eq(0)').show();
//<span style="white-space:pre">	</span>$('#searchTip div a').click(function(){
//<span style="white-space:pre">		</span>var current=$(this).parent();
//<span style="white-space:pre">		</span>current.hide();
//<span style="white-space:pre">		</span>current.next().show();
//<span style="white-space:pre">	</span>})
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>$('#searchTip div span, #searchTip div a:last').click(function(){
//<span style="white-space:pre">		</span>$('#mask, #searchTip').hide();<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>})
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">	</span>
//<span style="white-space:pre">		</span>//添加cookie
//<span style="white-space:pre">	</span>var oDate=new Date();
//<span style="white-space:pre">	</span>oDate.setDate(oDate.getDate()+30);
//<span style="white-space:pre">	</span>document.cookie="name=www.open.com.cn;expires="+oDate;
//<span style="white-space:pre">	</span>}
//})

</script>
</head>

<body>
<div id="mask"></div>
<div id="searchTip">
<div class="stepA"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepB"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepC"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepD"><a>下一步</a><span title="关闭">关闭</span></div>
<div class="stepE"><a>下一步</a><span title="关闭">关闭</span></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航