您当前的位置:首页 > 网站建设笔记 >

cookie悬浮信息提示框+带显示与隐藏记忆功能

0

效果见网页右下角,点击关闭小图标,然后刷新浏览器或浏览其他页面之后再返回本页面,悬浮信息提示框会保存你最近的展开或隐藏操作状态,点击下载:cookie悬浮信息提示框+带显示与隐藏记忆功能.rar,我们来看看HTML+CSS+JS的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>cookie悬浮信息提示框+带显示与隐藏记忆功能</title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;outline:none;list-style:none}

@font-face {
    font-family:'fontello';
    src:url('font/fontello.eot?21283407');
    src:url('font/fontello.eot?21283407#iefix') format('embedded-opentype'),
        url('font/fontello.woff2?21283407') format('woff2'),
        url('font/fontello.woff?21283407') format('woff'),
        url('font/fontello.ttf?21283407') format('truetype'),
        url('font/fontello.svg?21283407#fontello') format('svg');
    font-weight:normal;
    font-style:normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family:"fontello";
    font-style:normal;
    font-weight:normal;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    line-height:1em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.icon-cancel-circled-outline:before {content:'\e800';}
.icon-dot:before {content:'\e801';}
.icon-cancel:before {content:'\e802';}

.floater {position:fixed;z-index:10;right:10px;bottom:80px;font-family:Verdana,sans-serif;}
.floater a.hideFlo {
    position:absolute;right:0;top:0;
    width:22px;height:22px;text-indent:-1000em;
    cursor:pointer;text-decoration:none;color:#ddd;}
.floater a.hideFlo.icon-cancel:before {
    position:absolute;right:0;top:0;
    width:22px;height:22px;line-height:22px;
    text-align:center;font-size:14px;
    margin:0;text-indent:0;}
.floater a.hideFlo:hover {color:white;}

.floater div.content {
    padding:10px 15px;
    background:#3f65b7;
    border:1px solid #172b4e;border-bottom-color:#142647;
    border-radius:5px;
    background-clip:padding-box;
    background-image:-webkit-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:-moz-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:-o-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:radial-gradient(ellipse cover, #437dd6, #3960a6);
    -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);
    box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);}
.floater div.content > b {
    display:block;margin-bottom:10px;
    font-size:16px;color:white;text-align:center;
    text-shadow:0 -1px rgba(0,0,0,0.4);}
.floater div.content ul {list-style:none;margin:0;padding:0;}
.floater div.content li {list-style:none;margin:0;padding:0;}
.floater div.content li a {display:block;font-size:12px;color:white;text-decoration:none;}
.floater div.content li a.icon-dot::before {font-size:18px;vertical-align:middle;margin-left:0;text-align:left;margin-right:8px;width:auto;}

.floater a.openFlo {
    display:block;width:60px;height:47px;
    font-size:14px;line-height:16px;padding-top:13px;
    text-align:center;color:white;text-decoration:none;
    background:#3f65b7;
    border:1px solid #172b4e;border-bottom-color:#142647;
    border-radius:50%;
    background-clip:padding-box;
    background-image:-webkit-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:-moz-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:-o-radial-gradient(ellipse cover, #437dd6, #3960a6);
    background-image:radial-gradient(ellipse cover, #437dd6, #3960a6);
    -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);
    box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div class="format">

<div id="floater" class="floater">
    <a href="/list-123-1.html" class="openFlo">网站<br>模板</a>
    <div class="content">
        <b>PC+Mobile</b>
        <ul>
            <li><a class="icon-dot" href="/list-123----3-1.html">机械电子网站模板</a></li>
            <li><a class="icon-dot" href="/list-123----6-1.html">农业化工网站模板</a></li>
            <li><a class="icon-dot" href="/list-123----9-1.html">建材装修网站模板</a></li>
            <li><a class="icon-dot" href="/list-123----11-1.html">手机模板网站模板</a></li>
            <li><a class="icon-dot" href="/list-123----12-1.html">其他行业网站模板</a></li>
        </ul>
        <a href="javascript:;" class="hideFlo icon-cancel" title="隐藏悬浮信息">点击隐藏</a>
    </div>
</div>

</div>
<script type="text/javascript" src="/statics/ljs/jquery.js"></script>
<script type="text/javascript">
jQuery.cookie = function(name, value, options) {
    if (typeof value != "undefined") {
        options = options || {};
        if (value === null) {
            value = "";
            options.expires = -1;
        }
        var expires = "";
        if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == "number") {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24*60*60*1000));
            }else{
                date = options.expires;
            }
            expires = "; expires=" + date.toUTCString();
        }
        var path = options.path ? "; path=" + (options.path) : "";
        var domain = options.domain ? "; domain=" + (options.domain) : "";
        var secure = options.secure ? "; secure" : "";
        document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("");
    }else{
        var cookieValue = null;
        if (document.cookie && document.cookie != "") {
            var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
            if(arr != null) {
                cookieValue = decodeURIComponent(arr[2]);
            }
        }
        return cookieValue;
    }
};

(function(){
    function setFloater(valtype, writeCookie) {
        if (valtype == 0) {
            $(".floater .content").show();
            $(".openFlo").hide();
            if (writeCookie) {
                var cookietime = new Date();
                var days = 1;
                cookietime.setTime(cookietime.getTime()+days*24*60*60*1000);
                $.cookie("floater",0,{expires:cookietime});
            }
        } else {
            $(".floater .content").hide();
            $(".openFlo").show();
            if (writeCookie) {
                var cookietime = new Date();
                var days = 1;
                cookietime.setTime(cookietime.getTime()+days*24*60*60*1000);
                $.cookie("floater",1,{expires:cookietime});
            }
        }
    }
    $(".hideFlo").click(function(event){
        event.preventDefault();
        setFloater(1,true);
    });
    $(".openFlo").click(function(event){
        event.preventDefault();
        setFloater(0,true);
    });
    var show = true;
    var cookeVal = $.cookie("floater");
    if (cookeVal == null || cookeVal == "0") show = false;
    setFloater(show ? 1 : 0, true);
})();
</script>
</body>
</html>
顶部中部底部