jq/js新手引導,cookie

<!--**********************************製做新手引導的思路***********************-->
<!--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
-->
相關文章
相關標籤/搜索