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

## 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
版权说明：若无注明，本文皆为“玖月博客”原创，转载请保留文章出处。

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复

4 条评论

Dark Google Chrome 85.0.4183.101 Android 9
September 24th, 2020 at 04:56 pm

老板好，老板再见

回复
1. 玖月 Google Chrome 73.0.3683.121 Android 10
  September 24th, 2020 at 04:58 pm
  
  @Dark
  老兄好
  
  回复
金石热点网 Firefox 79.0 Windows 10
September 23rd, 2020 at 06:36 pm

文章写的很好,加油~

回复
广东自考 搜狗浏览器 2.X Windows 7
September 22nd, 2020 at 06:16 pm

太太太实用！

回复

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

发表评论取消回复

4 条评论

用闲置手机搭建本地WEB环境+ngrok内网穿透实现外网访问

小米8安装Google Play服务套件

世界上224个国家的中英文名称

Emlog,wordpress,typecho文章，百度是否已收录检测代码

单机斗地主不联网绿色版，适合老年人玩

本站已上线微信QQ小程序

回形针PaperClip：关于新冠肺炎的一切

GitHub-京东自动签到

写点啥，我也不知道写点啥

简洁漂亮的目录程序：files.photo.gallery

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

发表评论 取消回复

4 条评论

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

发表评论取消回复