簡(jiǎn)單的網(wǎng)頁(yè)廣告特效實(shí)例
更新時(shí)間：2017年08月19日 09:40:17 投稿：jingxian
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單的網(wǎng)頁(yè)廣告特效實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
為了練習(xí)javascript，做了一個(gè)簡(jiǎn)單的demo，實(shí)現(xiàn)的是廣告從頂部慢慢拉出到最大，然后停留2s，再收縮到比較小且可以關(guān)閉的廣告特效。圖片可以替換為任意其他的圖片。
代碼如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#ad{
width:962px;
display:none;
margin:0 auto;
overflow:hidden;
position:relative;
}
#main{
margin:0 auto;
width:960px;
height:1700px;
}
#close{
width:20px;
height:20px;
position:absolute;
top:0;
right:0;
font-size:16px;
line-height:20px;
text-align:center;
display:none;
background:yellowgreen;
}
</style>
</head>
<body>
<div id="ad">
<img src="ad.png" id="imgAd" width="962" height="386">
<img src="cur.png" id="curAd" width="1199" height="68">
<span id="close">x</span>
</div>
<div id="main"><img src="數(shù)字商品-10-23.jpg"></div>
<script>
var oImgAd=document.getElementById('imgAd');
var oad=document.getElementById('ad');
var ocur=document.getElementById('curAd');
var closeBtn=document.getElementById('close');
var h=0;
var maxH=oImgAd.height;
var minH=ocur.height;
function down()
{
if(h<maxH)
{
h+=5;
oad.style.height=h+"px";
oad.style.display="block";
setTimeout(down,5);
}
else{
setTimeout(up,2000);
}
}
function up(){
if(h>minH){
h-=5;
oad.style.height=h+"px";
setTimeout(up,5);
}
else{
oImgAd.style.display='none';
closeBtn.style.display='block';
}
}
closeBtn.onclick=function(){
oad.style.display='none';
}
setTimeout(down,1000);
</script>
</body>
</html>
以上這篇簡(jiǎn)單的網(wǎng)頁(yè)廣告特效實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
全面解析JavaScript里的循環(huán)方法之forEach，for-in，for-of
這篇文章主要介紹了全面解析JavaScript里的循環(huán)方法之forEach，for-in，for-of的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript語(yǔ)法約定和程序調(diào)試原理解析
這篇文章主要介紹了JavaScript語(yǔ)法約定和程序調(diào)試原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章介紹了JS字符串處理實(shí)例代碼,有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了TypeScript接口，接口的作用就是為這些類(lèi)型命名和為你的代碼或第三方代碼定義契約。下面我們一起進(jìn)入文章看看TypeScript接口得具體定義吧,需要的朋友也可以參考一下2021-12-12
前端實(shí)現(xiàn)時(shí)鐘網(wǎng)頁(yè)的詳細(xì)代碼示例
本文介紹了如何在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)動(dòng)態(tài)顯示的時(shí)鐘,并且添加了白天和夜晚兩種模式的切換功能,通過(guò)簡(jiǎn)單的HTML結(jié)構(gòu)和JavaScript代碼,使用Date()函數(shù)動(dòng)態(tài)獲取當(dāng)前的時(shí)間,并將時(shí)、分、秒通過(guò)邏輯綁定到相應(yīng)的div元素上,實(shí)現(xiàn)時(shí)鐘的動(dòng)態(tài)顯示,需要的朋友可以參考下2024-09-09
本文通過(guò)實(shí)例代碼給大家介紹了js中的attr的用法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-10-10
IE6瀏覽器中window.location.href無(wú)效的解決方法
這篇文章主要介紹了IE6瀏覽器中window.location.href無(wú)效的解決方法,給出了正確與錯(cuò)誤的實(shí)例對(duì)比,分析跳轉(zhuǎn)無(wú)效的原因與解決方法,是非常實(shí)用的技巧,需要的朋友可以參考下2014-11-11
JavaScript中閉包的作用和應(yīng)用場(chǎng)景
這篇文章將給大家詳細(xì)介紹JavaScript?中閉包是什么,有哪些應(yīng)用場(chǎng)景,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-09-09
bootstrap學(xué)習(xí)使用（導(dǎo)航條、下拉菜單、輪播、柵格布局等）
這篇文章主要為大家詳細(xì)介紹了bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁(yè)tabs等相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)實(shí)現(xiàn)云數(shù)據(jù)庫(kù)讀寫(xiě)權(quán)限，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05