HTML+JS网页广告自动移入移出及点击关闭

扎心小指针0

于 2022-09-22 08:57:23 发布

阅读量261

点赞数 2

分类专栏：前端开发文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_63381305/article/details/126984853

版权

前端开发专栏收录该内容

18 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript"src="jquery.min.js"></script>
	 <style type="text/css">
        .ad {
            display: none;
            position: fixed;
            right: 0;
            bottom: 0;
            width: 230px;
            height: 120px;
            background-image: url(images/ad.jpg);
        }

        .ad span {
            position: absolute;
            right: 0;
            top: 0;
            width: 40px;
            height: 18px;
            background-image: url(images/h.jpg);
            cursor: pointer;
        }
    </style>
</head>
<body>
	 <!--整个广告-->
    <div class="ad">
        <!--关闭按钮-->
        <span></span>
    </div>
    <script type="text/javascript">
    	$("div").slideUp(1500);
    		$("div").slideDown(1500);
    		$("div").slideUp(1500);
    	$("div").fadeIn();
    	$("div span").click(function(){
    		$('div').css("display","none");
    	});
    </script>
</body>
</html>