伊人久热亚洲五月,天天看夜夜狠狠躁精品

                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /網頁廣告特效

源代碼呢？

于曼麗

2014-10-08

源自：網頁廣告特效 3-1

關注問題我要回答

926

操作

收起

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);
	
}