js学习小笔记 

                                                                     js学习小笔记

1.$.cookie('history_back', backurl, { expires: 7, path: '/' })：创建一个key为"history_back"，value为backurl，过期时间为7天，生效路径为根路径的cookie。

实现网页的消息推送效果：

<DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        body{  
            margin:0;  
        }  
  
        .pop{  
            width:400px;  
            height:300px;  
            background-color:#fff;  
            border:1px solid #ccc;  
            position:fixed;  
            left:50%;  
            top:50%;  
            margin-left:-200px;  
            margin-top:-250px;  
            z-index:9999;  
            opacity:0;  
            filter:alpha(opacity=0);  
  
        }  
  
        .pop span{  
            float:right;  
            font-size:30px;  
            cursor:pointer;  
        }  
  
        .mask{  
            width:100%;  
            height: 100%;  
            background-color:#000;  
            opacity:0.6;  
            filter:alpha(opacity=60);  
            position:fixed;  
            z-index:9990;  
            left:0;  
            top:0     
        }  
        .pop_con{  
            display:none;  
        }  
  
        .hasknow{  
            text-align:center;  
            cursor:pointer;  
            margin-top:100px;  
        }  
    </style>  
  
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  
    <script type="text/javascript" src="../js/jquery.cookie.js"></script>  
    <script type="text/javascript">  
        $(function(){  
  
            var read = $.cookie('hasread');  
  
            //alert(read);  
  
            if(read==undefined)  
            {  
                $('.pop_con').show();  
                $('.pop').animate({marginTop:-150,opacity:1});                
            }  
  
            $('.hasknow').click(function() {  
  
                $.cookie('hasread','ok',{expires:7,path:'/'});  
                $('.pop_con').hide();  
  
            });           
        })  
  
    </script>  
</head>  
<body>  
      
    <div class="pop_con">  
        <div class="pop">  
            <span>×</span>  
            <p>我们网站有优惠，赶紧行动吧！亲！</p>  
            <p class="hasknow">我知道了</p>  
        </div>  
        <div class="mask"></div>  
    </div>  
  
    <h1>网站首页</h1>  
</body>  
</html>

 

2.Animate.css 一款强大的预设css3动画库：http://www.jq22.com/jquery-info819

 

posted @ 2018-02-06 19:42  汗水与荣光  阅读(90)  评论(0)  编辑  收藏  举报