实现“新手引导”效果-白红宇

效果:

代码:

<!DOCTYPE html>

<html>

<head>

*{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>

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].οnclick=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>

</body>

</html>

本文转自素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1829156