Loading... ## javascript ``` <script> function turnoff(obj){ document.getElementById(obj).style.display="none"; } </script> ``` ## style.css ```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 ```html <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完整代码 ```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> ``` 本文作者:博主玖月 文章标题:PC端悬浮图片广告代码带关闭按钮 百度收录:未收录,点击提交 本文地址:https://www.9ywk.com/330.html 版权说明:若无注明,本文皆为“玖月博客”原创,转载请保留文章出处。 © 允许规范转载 赞赏 如果觉得我的文章对你有用,请随意赞赏 ×Close 赞赏作者 扫一扫支付 支付宝支付 微信支付
老板好,老板再见
老兄好
文章写的很好,加油~
太太太实用!