码迷,mamicode.com
首页 > 其他好文 > 详细

实现“新手引导”效果

时间:2016-07-23 21:16:41      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:新手执导

效果:

技术分享

技术分享

技术分享

技术分享

代码:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<style type="text/css">

*{margin: 0;padding: 0;}

.main-div{background:url(imgs/gz.jpg);background-size: cover;height: 800px}

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

#searchtip{width: 1400px;height: 800px;background:transparent;position: absolute;left: 50%;margin-left: -700px;display: none;}

#searchtip div{position: absolute;display: none;}

#searchtip div a{position: absolute;width: 50px;height: 30px;background:rgb(32, 137, 152);cursor: pointer;text-align: center;line-height: 32px;top: 0px;left: 0px;text-decoration: none;color: #fff;font-size: 12px;}

#searchtip div span{position: absolute;width: 30px;height: 30px;background:rgb(32, 137, 152);cursor: pointer;text-align: center;line-height: 30px;top: 0px;left: 170px;color: #fff;border-radius: 50%;}

.stepa{width: 200px;height: 135px;background:url(imgs/hand.jpg);left: 330px;}

.stepb{width: 200px;height: 135px;background:url(imgs/hand2.jpg);left: 970px;top: 90px}

.stepc{width: 200px;height: 135px;background:url(imgs/hand3.jpg);left: 620px;top: 580px}

</style>

<script type="text/javascript">

window. () {

//读取cookie

var localcookies = document.cookie.substring(5);

if (localcookies != "xinshouyindao") {


var mask = document.getElementById("mask"),

searchtip = document.getElementById("searchtip"),

step = searchtip.getElementsByTagName("div"),

aobj = searchtip.getElementsByTagName("a"),

spanobj = searchtip.getElementsByTagName("span");

mask.style.display = searchtip.style.display = step[0].style.display = "block";


//下一步

for (var i = 0; i < step.length; i++) {

aobj[i].index = i;

aobj[i].onclick=function(){

this.parentNode.style.display = "none";

if (this.index < step.length-1) {

step[this.index+1].style.display = "block";

}else if(this.index == step.length-1){

mask.style.display = searchtip.style.display = "none";

}

}

};


//关闭按钮

for (var i = 0; i < spanobj.length; i++) {

spanobj[i].onclick = function(){

mask.style.display = searchtip.style.display = "none";

}

};


//cookie存储

var date = new Date();

date.setDate(date.getDate()+30);

document.cookie = "name=xinshouyindao;expires="+date;

}


}

</script>

</head>

<body>

<div class="main-div">

<div id="mask"></div>

<div id="searchtip">

<div class="stepa"><a href="#">下一步</a><span title="关闭">X</span></div>

<div class="stepb"><a href="#">下一步</a><span title="关闭">X</span></div>

<div class="stepc"><a href="#">下一步</a><span title="关闭">X</span></div>

</div>

</div>

</body>

</html>


本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1829156

实现“新手引导”效果

标签:新手执导

原文地址:http://suyanzhu.blog.51cto.com/8050189/1829156

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!