仿一下京东官网顶部的广告关闭,效果为第一次进入官网会出现广告,然后点击关闭,刷新网页不会再显示广告,但是当清除localStorage存入的数据,刷新网页会再显示广告。
html代码
<div class="header">
<div class="header-a">
<a href=""></a>
<i class="close">x</i>
</div>
</div>
css代码
.header{
width:100%;
height:80px;
background:#000;
}
.header-a{
width:1190px;
margin:0 auto;
position:relative;
background:url("images/1.jpg") no-repeat;
}
.header-a a{
width:100%;
height:80px;
display:block;
}
.close{
cursor:pointer;
color:#fff;
position:absolute;
top:5px;
right:5px;
background:rgb(129, 117, 117);
width: 20px;
text-align: center;
line-height: 20px;
}
js代码
//localStorage方法
<script src="../js/jquery.min.js"></script>
function haxi(){
//判断localStorage里有没有isClose
if(localStorage.getItem("isClose")){
$(".header").hide();
}else{
$(".header").show();
}
//点击关闭隐藏图片存取数据
$(".close").click(function(){
$(".header").fadeOut(1000);
localStorage.setItem("isClose", "1");
})
}
haxi();