PC端悬浮图片广告代码带关闭按钮

玖月
2020-09-16 / 4 评论 / 1,036 阅读 / 正在检测是否收录...

javascript

<script>
function turnoff(obj){
document.getElementById(obj).style.display="none";
}
</script>

style.css

.leftpop{ position: fixed; z-index: 99; left: 10px; bottom: 10px;}
.leftpop .box{ -webkit-animation: rotate 0.4s linear alternate infinite; animation: rotate 0.4s linear alternate infinite;}
.leftpop .close-btn{ position: absolute; z-index: 1; top: -5px; right: -5px; width: 20px; height: 20px; line-height: 18px; text-align: center; border-radius: 50%; background-color: rgba(0,0,0,.5); color: #fff;}
@-webkit-keyframes rotate { 0% { transform: rotate(-5deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(5deg);; }}
@media screen and (max-width: 1221px) { .wapnone{display:none; }
}

Code

<div class="leftpop wapnone" id="xfad">
        <a class="close-btn" href="javascript:;" onclick="javascript:turnoff('xfad')"><i class="fa fa-remove"></i></a>
        <div class="box">
            <a href="https://www.9ywk.com" target="_blank"><img src="https://i.w3tt.com/2020/09/16/obHTl.png"></a>        </div>
    </div>

HTML完整代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>悬浮广告</title>
    <link href="./css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
function turnoff(obj){
document.getElementById(obj).style.display="none";
}
</script>
</head>
<body>
<div class="leftpop wapnone" id="xfad">
        <a class="close-btn" href="javascript:;" onclick="javascript:turnoff('xfad')"><i class="fa fa-remove"></i></a>
        <div class="box">
            <a href="https://www.9ywk.com/" target="_blank"><img src="img"></a>
            </div>
    </div>
</body>
</html>
0

评论 (4)

取消
  1. 头像
    广东自考
    Windows 7 · Google Chrome

    太太太实用!

    回复
  2. 头像
    金石热点网
    Windows 10 · FireFox

    文章写的很好,加油~

    回复
  3. 头像
    Dark
    Android Pie · Google Chrome

    老板好,老板再见 ::huaji:shounuehuaji::

    回复
    1. 头像
      玖月 作者
      Android · Google Chrome
      @ Dark

      老兄好 ::huaji:huaji::

      回复