網站新手引導（js+jquery）
阿新 • • 發佈：2019-02-17
<strong><span style="font-size:48px;">js:</span></strong> <!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%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none} #searchTip{ width:980px; height:800px; margin:0 auto; position:relative; 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;} </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("當前cookies="+"("+res+")"); //判斷是否來過 if(res!="www.open.com.cn"){ alert("沒有登入過"); 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"; //aStep[this.index+1].style.display="block"; if(this.index<aStep.length-1){//如上，如果不加這個判斷，到了最後一個會報錯 aStep[this.index+1].style.display="block"; } else if(this.index==aStep.length-1){//如果到了最後一個，結束整個操作 oMask.style.display="none"; this.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; } } </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></div> </div> </body> </html> <strong><span style="font-size:32px;">jquery:</span></strong> <!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%; background:#000; opacity:0.5; filter:alpha(opacity=50); position:absolute; left:0; top:0; display:none} #searchTip{ width:980px; height:800px; margin:0 auto; position:relative; 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;} </style> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript"> $(function(){ //讀取cookie var res=document.cookie.substring(5); alert("當前cookies="+"("+res+")"); //判斷是否來過 if(res!="www.open.com.cn"){ alert("沒有登入過"); $('#mask, #searchTip, #searchTip div:eq(0)' ).show(); $('#searchTip div a').click(function(){ var currentStep=$(this).parent(); currentStep.hide(); currentStep.next().show(); }) $('#searchTip div a:last, #searchTip div span').click(function(){ $('#mask, #searchTip').hide(); }) //新增cookie var oDate=new Date(); oDate.setDate(oDate.getDate()+30); document.cookie="name=www.open.com.cn;expires="+oDate; } }) </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></div> </div> </body> </html>
程式碼是慕課網來的。