商城底部可关闭通告栏

一：特效：

 

 

二：代码说明

 

<!doctype html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style>
*{
    margin: 0;
    padding: 0;
}
#hide_layer {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 999;
}
#layer_bj {
    background-image: url("./123.jpg");
    height: 160px;
    opacity: 1;
    width: 100%;
}
#close_foot {
    cursor: pointer;
    display: block;
    height: 14px;
    margin-right: -586px;
    position: absolute;
    right: 46%;
    top: 0;
    width: 10px;
}
fieldset, img {
    border: medium none;
}
</style>
<script type="text/javascript" src="./jquery.js"></script>
</head> 
<body> 

         <div id="hide_layer" style="display: block;">
              <div id="layer_bj"></div>
            <p id="close_foot">
              <img src="./btn_close.png" alt="" />
            </p>
         </div>
    <script type="text/javascript">
      var close = document.getElementById('close_foot');
      var layer = document.getElementById('hide_layer');
      close.onclick = function(){
        layer.style.display='none';
      };
    </script>
</body> 

</html>

 

三：源码地址：http://pan.baidu.com/s/1eSMg4Ps

posted @ 2017-04-13 15:01  王传明  阅读(100)  评论(0)    收藏  举报