jQuery实现弹出广告

最新推荐文章于 2022-11-10 08:40:49 发布

故里有长安、

最新推荐文章于 2022-11-10 08:40:49 发布

阅读量597

点赞数

分类专栏：前端文章标签： jQuery 弹出广告

本文链接：https://blog.csdn.net/x_l_t/article/details/102664009

版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何利用jQuery实现右下角广告图片的弹出效果，详细讲解了相关代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现右下角广告图片的弹出
代码：

<!DOCTYPE html>
<html>
	<head>
			<meta charset="UTF-8">
			<title>广告</title>
			<style type="text/css">
				img {
					width: 200px;
					height: 200px;
					display: none;
					/*固定定位，定位参照物为浏览器的可视化窗口*/
					position: fixed;
					right: 10px;
					bottom: 10px;
				}
			</style>
		</head>
		<body>
			<img src="img/img04.jpg" alt="" />
		</body>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			setInterval(function(){
				/*
							 	总共4000
							 	花500毫秒执行显示的动画
							 	显示完保持1500毫秒
							 	在第2000毫秒时执行隐藏的动画，耗时500毫秒
							 	隐藏保持1500毫秒
							 */
					$("img").slideUp(500,"linear");
					setTimeout(function(){
						$("img").slideDown(500,"linear");
					},2000)
				
			},4000)
		</script>
</html>

showtime：
在这里插入图片描述