效果见网页右下角，点击关闭小图标，然后刷新浏览器或浏览其他页面之后再返回本页面，悬浮信息提示框会保存你最近的展开或隐藏操作状态，点击下载：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;left: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>