亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

正在回答

1 回答

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>頂部廣告展開收起</title>

<style>

body, div, img, span {

margin: 0;

padding: 0;

}

#content {

width: 960px;

height: 1000px;

background: #ccc;

margin: 0 auto;

}

#ad {

width: 960px;

margin: 0 auto;

display: none;

position: relative;

overflow: hidden;

}

#close {

position: absolute;

width: 20px;

height: 20px;

text-align: center;

line-height: 20px;

background: #CF3;

top: 0;

right: 0;

display: none;

cursor: pointer;

}

</style>

</head>

<body>

<div id="ad">?

? ?<img id="adcon" src="ad.png" width="960" height="386"/>?

? ?<img id="adcur" src="cur.png" width="960" height="68"/>?

? ?<span id="close">X</span>?

</div>

<div id="content"><img src="數字商品-10-23.jpg" /></div>

<script>

//全局變量

/*var oAd ? ? = document.getElementById('ad');

var oAdcon ?= document.getElementById('adcon');

var oAdcur ?= document.getElementById('adcur');

var oClose ?= document.getElementById('close');

*/

var getId = function(id){

return document.getElementById(id);

}

var maxH = getId('adcon').height;//最大高度

var minH = getId('adcur').height;//最小高度

var step = 5;//移動的距離

var h ? ?= 0;


/*廣告向下展開*/

function adDown(){

if(h<maxH){

h += step;//向下移動

setTimeout(adDown,1);

}else{

setTimeout(adUp,3000); //停留時間自己適當調整 1000 = 1秒

}

getId('ad').style.display = "block";

getId('ad').style.height ?= h+"px";

}


/*廣告向上收起*/

function adUp(){

getId('ad').style.height = h+"px";


if(h>minH) {

h -= step;

setTimeout(adUp,1);

}else {

getId('adcon').style.display = "none";

getId('close').style.display = "block";

}

}


getId('close').onclick = function(){

getId('ad').style.display = "none";

}

setTimeout(adDown, 3000);

</script>

</body>

</html>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁廣告特效
  • 參與學習       40172    人
  • 解答問題       132    個

原來這么EASY，從淺到深，逐步優化代碼，讓你深入理解

進入課程
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號