制作Web页面广告

山不语722

于 2024-07-01 14:21:38 发布

阅读量523

点赞数 22

文章标签： js html css

本文链接：https://blog.csdn.net/weixin_63390098/article/details/140099778

版权

要求

制作简单页面，作为广告载体。页面高度至少3屏，以保证能展示用户上下移动滚动条时的广告效果。

制作对联广告
(1)要求
①页面加载完成即出现左右对联广告：
②广告固定于页面上方；
③广告能够关闭.
(2)思路
①使用BOM获取浏览器信息；
②使用DOM控制广告元素的内容和行为：
③封装代码，让广告的各种参数更灵活。

制作右下角弹窗广告
(1)要求
①弹窗广告出现于页面右下方；
②弹窗广告具有缓慢出现的动画效果；
③广告能够关闭.
(2)思路
①使用DOM控制广告元素的显示与隐藏；
②使用定时器相关知识实现动画效果。

创建4个盒子，作为广告和内容部分：

<body>
    <!-- 广告1 -->
    <div class="ad-container" id="ad1">
        <!-- 关闭按钮 -->
            <span class="close-btn" onclick="closeAd('ad1')">关闭</span>
            <!-- 广告图片 -->
            <img src="./img/ad1.png" width="150px">
        </div>
        
    <!-- 正文内容 -->
    <div class="top">
        <h2>年轻人涌入道观：打太极、拜神，安顿身心</h2>
        <p>这里是文章内容</p>
        <img src="./img/taiji.png" width="500px">
        <p>这里是文章内容</p>
        <img src="./img/baishen.png" width="500px">
        <p>这里是文章内容</p>
        <p>这里是文章内容</p>
    </div>
    
    <!-- 广告2 -->
    <div class="ad-container" id="ad2">
        <span class="close-btn" onclick="closeAd('ad2')">关闭</span>
        <img src="./img/ad2.png" width="150px">
    </div>
    
    <!-- 广告3：弹出广告 -->
    <div class="ad-container" id="ad3">
        <span class="close-btn" onclick="closeAd('ad3')">关闭</span>
        <img src="./img/ad3.png" width="300px">
    </div>
</body>

设置样式，将广告放置到对应位置：

*{
            margin: auto; 
            padding:0px;  
        }
        
        .top{
            margin: auto; 
            padding:0px;
            width:800px;/* 盒子宽度 */
            height: 1800px;/* 盒子高度 */
            border: solid 3px #8b8b8b;/* 设置边框 */
            background-color: #cecece;/* 背景颜色 */
        }
        h2{
            font-size:30px;
            font-weight: 500;
            text-align: center;
            color: #333;
        }
        
        #ad1{
            position: fixed;/* 设置位置 */
            top: 10px;/* 顶部间距 */
            left: 0;/* 靠左 */
            z-index: 1000;
        }
        #ad2{
            position: fixed;
            top: 10px;
            right: 0;/* 靠右 */
            z-index: 1000;
        }
		#ad3 {
		    position: fixed;
		    bottom: -300px; /* 广告3初始位置设置在屏幕外 */
		    right: 0;
		    z-index: 1000;
		}
		
		.ad-container {
		    position: relative;
		    transition: bottom 0.5s ease; /* 添加过渡效果 */
		}
		
		.close-btn {
		    position: absolute;
		    top: 5px;
		    right: 5px;
		    cursor: pointer;
		    color: #cb2d01;
		    font-weight: 1000;
		}

写js来进行弹窗广告的动画，以及广告的删除：

<script>
    // 延迟显示广告3
    setTimeout(function() {
        let ad3 = document.getElementById('ad3');
        ad3.style.bottom = "10px"; // 广告3显示在屏幕底部
    }, 3000); // 3秒后显示广告3
    
    function closeAd(adId) {
        let ad = document.getElementById(adId);
        ad.style.display = "none"; // 隐藏广告
    }
</script>

运行效果：

山不语722

关注

22
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
制作Web页面广告

制作简单页面，作为广告载体。页面高度至少3屏，以保证能展示用户上下移动滚动条时的广告效果。①使用DOM控制广告元素的显示与隐藏；③封装代码，让广告的各种参数更灵活。②弹窗广告具有缓慢出现的动画效果；②使用定时器相关知识实现动画效果。①使用BOM获取浏览器信息；①弹窗广告出现于页面右下方；②广告固定于页面上方；
复制链接

扫一扫