网页顶部广告展开与收起

客官°小女子只卖身不卖艺 2021-09-16 22:54 426阅读 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 条评论，426人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue点击展开更多，点击收起

<template> <div> <div class="menus"> <di

我不是女神ヾ/ 2022年03月21日 08:48/ 0 赞/ 491 阅读

相关 Jquery实现简单的点击展开和收起

当标签逐渐增多时，页面就会随着拉长；用户体验不佳。针对我自己博客用`Jquery` 写了一个小方法用于实现展开和收起的 ![image][] `html`代码 <

布满荆棘的人生/ 2022年03月10日 09:09/ 1 赞/ 471 阅读

相关 vue 写点击展开及收起

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

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

相关 JQ 展开收起

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

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

相关 js对联广告,顶部浮动广告,固定位置广告插件

整个广告放在一个js文件中,所以,需要先在模板上引入这个baidu.js文件广告位置会自动插入,一般不需要找位置. 因为js中有一个固定位置的广告,所以.哪个位置需要

迷南。/ 2021年09月27日 04:50/ 0 赞/ 463 阅读

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

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

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