<!--**********************************製做新手引導的思路***********************--> <!--1.絕對定位: (1)有父節點,參照付節點 (2)沒有父節點,參照body的左上 2.html結構 蒙版設置:設置html和body,蒙版的高度爲100%,爲了撐開蒙版(爲了解決兼容問題) 注意內容:1.html和body都設置爲100% 2.ie8如下都不支持opacity,能夠使用filter來解決這個問題。 3.隱藏按鈕文字的小技巧,text-indent:-999px; overflow:hidden;這種方法是先使用text-indent:-999px;語句把被設置元素「擠出去」了,而後設置溢出的元素都隱藏起來,也就是被擠出去的元素隱藏起來。
document.cookie存在的狀況下,不會發生一些事件
重點是獲取和設置cookie -->
<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;position: fixed} #searchTip{ width:980px; height:800px; margin:0 auto; position:relative; } #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>
htmlhtml
<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>
jscookie
<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) console.log(res) //若是沒有cookie,執行如下動做 if(res!='www.open.com.cn'){ //記得加引號 //mask 父框 第一單元顯示出來 oMask.style.display=oSearch.style.display=aStep[0].style.display='block' } //下一步按鈕 for(var i=0;i<aStep.length;i++){ aA[i].index=i; //設置索引值 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){ //若是是最後一個的話,就隱藏全部的 this.parentNode.style.display='none' } } } //關閉按鈕 for(var i in aClose){ aClose[i].onclick=function(){ oMask.style.display=oSearch.style.display='none' } } //添加cookie //name能夠隨便命名 var oDate=new Date() oDate.setDate(oDate.getDate()+30); //設置日期 var oName='www.open.com.cn' // document.cookie="name=www.open.com.cn;expires=oDate" document.cookie="name="+oName+";expires="+oDate //裏面的字符串必須爲雙引號 } </script>
jqide
<script> $(function(){ //讀取cookie var res=name.substring('5') if(res!='www.open.com.cn'){ $('#mask,#searchTip,#searchTip div:eq(0)').show() } //點擊 $('#searchTip div a').click(function(){ $(this).parent().hide() .next().show() /* if($(this).parent().is('.stepE')){ $('#mask,#searchTip,#searchTip div:eq(0)').hide() }else{ $(this).parent().hide() .next().show() }*/ }) //關閉,若是是最後一個的時候,不須要加判斷,直接把全部的都關閉便可 $('#searchTip div span,#searchTip div a:last').click(function(){ $(this).parent().hide() $('#mask,#searchTip').hide() }) //設置cookie var day=new Date(); day.setDate(day.getDate()+30) var newName='www.open.com.cn' document.cookie="name="+newName+";expires="+day }) </script>
<!--*****************************總結**************************--> <!-- js 1.循環判斷的時候,要加索引值,經過判斷索引值解決最後一個問題 2.設置日期,是setDate() 3.設置cookie,裏面若是是動態的數據,記得都是雙引號 4.讀取cookie jq 1.最後一個圖片的時候,不須要判斷,直接和關閉按鈕一塊兒進行關閉功能 2.最後一個元素:last -->