网页顶部广告展开与收起

客官°小女子只卖身不卖艺 2021-09-16 22:54 447阅读 0赞

### 网页顶部广告展开与收起 ###

在很多网站中，为了广告推送效果，往往会在进入网站的时候，出现弹窗；一定时间后，再次收起，不影响用户的体验。

--------------------

#### 代码思路分析 ####

进入页面，广告页面**自动**展开收起，说明我们可以使用**计时器**完成。我们可以实时改变广告页面的**高度**，以达到相应的动画效果。

--------------------

#### 代码结构 ####

##### HTML文件 #####

<div id="advertising">
    	<img id="advertising-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541524709217&di=92387f0949e14c6bba4428b280ea41c9&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201705%2F23%2F171626c8zga7nho3eblgzv.jpg" width="960" height="385" />
    </div>
    <div id="content">
    	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541526060871&di=19f3e9140684810921272f8eafe05179&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201310%2F28%2F20131028142745_a4HJy.jpeg" alt="图片加载失败" />
    </div>

--------------------

##### CSS文件 #####

* { 
    	margin: 0;
    	padding: 0;
    }
    
    #content { 
    	width: 960px;
    	height: 1000px;
    	background: #ccc;
    	margin: 0 auto;
    	overflow: hidden;
    }
    
    #advertising { 
    	width: 960px;
    	margin: 0 auto;
    	display: none;
    	position: relative;
    	overflow: hidden;
    }

--------------------

##### JS文件（关键） #####

<script>
    	var oAdvertising = document.getElementById('advertising');
    	var oAdvertisingImg = document.getElementById('advertising-img');
    	var h = 0;
    	var step = 5;
    	var maxHeight = oAdvertisingImg.height;
    	function advertisingDown() { 
    			oAdvertising.style.height = h + 'px';
    			oAdvertising.style.display = 'block';
    			if (h < maxHeight) { 
    				h += step;
    				setTimeout(advertisingDown, 1);
    			} else { 
    				setTimeout(advertisingUp, 3000);
    			}
    	}
    
    	function advertisingUp() { 
    		if (h > 0) { 
    			h -= step;
    			oAdvertising.style.height = h + 'px';
    			setTimeout(advertisingUp, 1);
    			}
    	}
    	setTimeout(advertisingDown, 3000);
    </script>

--------------------

#### 温馨提示 ####

在制作该动画效果时，我们对于声明的**函数**，必须清楚执行的**时机**。这个时机的**分界点**就是广告页面的高度**h**；当页面的高度**h**小于最大高度**maxHeight** 时**展开**，当达到最大高度**maxHeight**后，向上**收起**。

发表评论取消回复

表情：

评论列表（有 0 条评论，447人围观）

还没有评论，来说两句吧...

相关阅读

相关展开和收起动画（jQuery）

展开和收起动画（jQuery）废话不多说，上代码！！！ <!DOCTYPE html> <html lang="en"> <head

Myth丶恋晨/ 2023年10月04日 10:31/ 0 赞/ 19 阅读

相关 js || jQuery 元素收起展开

1、用jQuery来实现层叠关系，元素可以收起、展开；并且使用了slideUp、slideDown动画效果。 $(".ul0").click(function (e)

野性酷女/ 2023年07月07日 12:53/ 0 赞/ 22 阅读

相关小程序文章内容展开收起

动态改变文章内容（多篇或单片）处理方式：通过小程序中SelectorQuery()选择器方法获取文章内容高度，通过默认收起状态最大高度判断是否显示展开按钮如果超出

╰+攻爆jí腚メ/ 2023年06月17日 07:58/ 0 赞/ 30 阅读

相关 CSS 实现多行文本“展开收起”

——————— Y · F · E ——————— ![957c4fe0b7853ad43aeb4c4e5f5bacd1.png][] 多行文本展开收起是一个很常见的交互，

淡淡的烟草味﹌/ 2023年01月23日 02:54/ 0 赞/ 863 阅读

相关页面展开收起php代码,jQuery实现的页面详情展开收起功能示例

本文实例讲述了jQuery实现的页面详情展开收起功能。分享给大家供大家参考，具体如下： jQuery实现页面详情展开收起 .detailpd \{ padding-top:

た入场券/ 2023年01月17日 03:25/ 0 赞/ 232 阅读

相关 iOS tableviewcell里点击文字展开与收起功能

做项目遇到动态列表中需要做文字展开与收起功能，有空单独抽出一个demo给大家参考。 1、效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ

妖狐艹你老母/ 2022年12月13日 12:48/ 0 赞/ 826 阅读

相关 vue长文本点击展开收起

点击展开收起 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

以你之姓@/ 2022年12月05日 12:18/ 0 赞/ 210 阅读

相关 vue 写点击展开及收起

<template> <div> <div> <p id="p">Lorem ipsum dolor sit amet,

小灰灰/ 2021年12月18日 22:21/ 0 赞/ 585 阅读

相关 JQ 展开收起

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

刺骨的言语ヽ痛彻心扉/ 2021年12月10日 08:53/ 0 赞/ 371 阅读

相关网页顶部广告展开与收起

网页顶部广告展开与收起在很多网站中，为了广告推送效果，往往会在进入网站的时候，出现弹窗；一定时间后，再次收起，不影响用户的体验。 --------------

客官°小女子只卖身不卖艺/ 2021年09月16日 22:54/ 0 赞/ 448 阅读