JQuery实现动态漂浮广告

最新推荐文章于 2019-08-14 10:15:43 发布

lyh_0301

最新推荐文章于 2019-08-14 10:15:43 发布

阅读量1.6k

点赞数 3

分类专栏： web前端-HTML 文章标签： JQuery JavaScript Html 漂浮广告

本文链接：https://blog.csdn.net/lyh_0301/article/details/99410643

版权

本文介绍了如何利用JQuery实现动态漂浮广告效果，包括在网页全局窗口中的应用。通过示例代码展示了具体实现步骤。

摘要由CSDN通过智能技术生成

JQuery实现动态漂浮广告&全局窗口

以下是效果图及实现代码：

页面效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>漂浮广告栏</title>
	<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
	<style type="text/css">
		body{
			height: 100%;
			width: 100%;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		#floatdiv{
			width: 200px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #fbb;
			z-index: 999;
			border: 1px solid #ccc;
			border-radius: 10px 10px ;
		}
		span{
			position: absolute;
			top: 0;
			right: 0;
			color: darksalmon;
			background-color: rgba(0, 0, 0, 0.5);
			padding: 0 5px;
			cursor: pointer;
			border-radius: 20% 20%;
		}
	</style>
	
<