簡(jiǎn)單的網(wǎng)頁(yè)廣告特效實(shí)例
為了練習(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中call,apply,bind的區(qū)別與實(shí)現(xiàn)
這篇文章主要介紹了JavaScript中call,apply,bind的區(qū)別與實(shí)現(xiàn),文章通過(guò)圍繞主題思想展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09關(guān)于javascript函數(shù)的幾個(gè)話題
關(guān)于javascript函數(shù)的幾個(gè)話題...2007-03-03手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash
這篇文章主要介紹了手寫(xiě)Spirit防抖函數(shù)underscore和節(jié)流函數(shù)lodash,接下來(lái)將會(huì)帶你們了解下這兩者的區(qū)別,以及我們?cè)撊绾问謱?xiě)實(shí)現(xiàn)這兩個(gè)函數(shù)2022-03-03JavaScript中常見(jiàn)的類(lèi)型判斷方法和區(qū)別詳解
在JavaScript中,我們經(jīng)常需要對(duì)數(shù)據(jù)的類(lèi)型進(jìn)行判斷,以便進(jìn)行相應(yīng)的處理,本文將介紹JavaScript中常見(jiàn)的類(lèi)型判斷方法,包括typeof、instanceof、Object.prototype.toString() 以及Array.isArray(),并且會(huì)詳細(xì)解釋它們之間的區(qū)別,需要的朋友可以參考下2023-11-11原生js封裝二級(jí)城市下拉列表的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇原生js封裝二級(jí)城市下拉列表的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JavaScript 處理Iframe自適應(yīng)高度(同或不同域名下)
Iframe自適應(yīng)高度一直都備受關(guān)注,接下來(lái)為大家介紹下同域名下Iframe自適應(yīng)高度的處理以及跨域時(shí)Iframe高度自適應(yīng),感興趣的朋友可以參考下哈2013-03-03詳解JSONObject和JSONArray區(qū)別及基本用法
這篇文章主要介紹了詳解JSONObject和JSONArray區(qū)別及基本用法,需要的朋友可以參考下2017-10-10