javascript（原生）-新人引导练习

时间：2014-12-03 13:59:06 阅读：222 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新人引导</title>
<style>
*{ margin:0; padding:0}
html{ height:100%}
html.noScrollBar{width:100%;height:100%;overflow: hidden;}
body{height:100%}
#mask{ height:100%; width:100%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none}
#searchTip{ width:980px; height:100%; margin:0 auto; position:absolute;top:0;left:50%;margin-left:-490px; display:none}
#searchTip div{ position:absolute; display:none }
#searchTip div a{ position:absolute;width:96px; height:32px; cursor:pointer; text-indent:-999px; overflow:hidden}
#searchTip div span{cursor:pointer; position:absolute; width:30px; height:30px;text-indent:-999px; overflow:hidden}
.stepA{ background:url(images/guide11.png); height:329px; width:745px; top:130px; left:-9px; display:block}
.stepA a{top:230px; left:490px; }
.stepA span{ top:143px; right:32px; }
.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;}
.imgs{margin:0 auto;width:980px;}
.imgs div.one{background:url(images/body.png) center top;}
</style>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
</head>
<body>
<div class="imgs">
<div class="one" style="height:1694px;width:980px; </div>
</div>
<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></div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var mask = document.getElementById(‘mask‘),
  searchTip = document.getElementById(‘searchTip‘),
  steps = searchTip.getElementsByTagName(‘div‘),
  nexts = searchTip.getElementsByTagName(‘a‘),
  cosleBtns = searchTip.getElementsByTagName(‘span‘);
var html = document.getElementsByTagName(‘html‘)[0];

var newGuidance = function(){
mask.style.display = searchTip.style.display = steps[0].style.display = ‘block‘;
html.className = ‘noScrollBar‘;

  //yin dao
  for(var i = 0, l = nexts.length; i < l; i++){
   nexts[i].index = i;
   nexts[i].onclick = function(){
    this.parentNode.style.display = ‘none‘;
    if(this.index < nexts.length-1){
     console.log(this.index);
     steps[this.index + 1].style.display = ‘block‘;
    }else if(this.index == nexts.length-1){
     mask.style.display = searchTip.style.display = ‘none‘;
     html.className = ‘‘;
    }else{
     return;
    }
   }
  }

  //close yindao
  for(var i = 0, l = cosleBtns.length; i < l; i++){
   cosleBtns[i].onclick = function(){
    mask.style.display = searchTip.style.display = ‘none‘;
    html.className = ‘‘;
   }
  }

  //add cookie
  var date = new Date();
  date.setDate(date.getDate() + 30);
  document.cookie = ‘name=newGuidances;expires=‘+date;
};

//get cookie
if(document.cookie.substring(5) != ‘newGuidances‘){
newGuidance();
}else{
return;
}
};
</script>
</html>

javascript（原生）-新人引导练习

标签：style http io ar os sp java for on

原文地址：http://www.cnblogs.com/sunhw360/p/4139792.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行