源代码呢？ -慕课网

                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /网页广告特效

源代码呢？

于曼丽

2014-10-08

源自：网页广告特效 3-1

关注问题我要回答

902

操作

收起

2 回答

拉格朗日之都
2016-03-18

不太喜欢用ID，因此有部分和老师不一样

1 回复有任何疑惑可以回复我~

收起回答

拉格朗日之都
2016-03-18

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Javascript 伸缩广告</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/script.js"></script>
</head>
<body>
	<div class="ad" id="ad">
		<img class="big" src="images/big.jpg" alt="" height="350" />
		<img class="small" src="images/small.jpg" alt="" height="100px">
		<span class="close">&times;</span>
	</div>
	<div class="main">
		<img src="images/tb_bg.jpg" alt="">
	</div>
</body>
</html>

*{
	margin:0;
	padding:0;
}
body{
	position: relative;
	font-family:"Microsoft Yahei";
}
.main{
	width:1190px;
	height:100%;
	margin:0 auto;
}

.ad{
	position: relative;
	width:1190px;
	margin:0 auto;
	overflow:hidden;
	display:none;
}
.ad img{
	width:100%;
	margin:0;
}
.close{
	opacity:0;
	position: absolute;
	bottom:25px;
	right:30px;
	display: block;
	padding:7px 13px;
	background: #E27C57;
	color:#fff;
	font-size:24px;
	transition: all 0.5s;
	cursor: pointer;
}
.close:hover{
	background: #E46537;
}

//封装获取ID的方法
// function $(id){
// 	return typeof id==='string'?document.getElementById(id):id;
// }


window.onload = function(){
	//获取广告盒子
	var ad = document.getElementsByClassName('ad')[0];
	//获取广告图片
	var imgB = ad.getElementsByClassName('big')[0];
	var imgS = ad.getElementsByClassName('small')[0];
	//获取关闭按钮
	var close = ad.getElementsByClassName('close')[0];
	//初始高度
	var h = 0;
	// 最大最小高度/步长
	var maxH = imgB.height,
		minH = imgS.height,
		step = 3;
	//向下展开效果
	function adDown(){
		if(h<maxH){
			h+=step;
			ad.style.height = h+'px';
			ad.style.display = "block";
			setTimeout(adDown,1);
		}
		else{
			setTimeout(adUp,3000);
		}
	}

	//向上收起效果
	function adUp(){
		if(h>minH){
			h-=step;
			ad.style.height = h+'px';
			setTimeout(adUp,1);
		}
		else{
			imgB.style.display = 'none';
			imgS.style.display = 'block';
			close.style.opacity = 1;
		}
	}

	//关闭按钮点击事件
	close.onclick = function(){
		ad.style.display = 'none';
	}

	// 页面加载完成3S后执行adDown()
	setTimeout(adDown,1000);
	
}