網頁廣告特效代碼分享-js教程-PHP中文網

首頁

web前端

js教程

網頁廣告特效代碼分享

巴扎黑

Aug 21, 2017 am 09:59 AM

程式碼分享特效

下面小編就為大家帶來一個簡單的網頁廣告特效實例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

為了練習javascript，做了一個簡單的demo，實現的是廣告從頂部慢慢拉出到最大，然後停留2s，再收縮到比較小且可以關閉的廣告特效。圖片可以替換為任何其他的圖片。

程式碼如下

<!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>
<p 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>
</p>
<p id="main"><img src="数字商品-10-23.jpg"></p>
<script>
 var oImgAd=document.getElementById(&#39;imgAd&#39;);
 var oad=document.getElementById(&#39;ad&#39;);
 var ocur=document.getElementById(&#39;curAd&#39;);
 var closeBtn=document.getElementById(&#39;close&#39;);
 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=&#39;none&#39;;
   closeBtn.style.display=&#39;block&#39;;
  }
 }
 closeBtn.onclick=function(){
  oad.style.display=&#39;none&#39;;
 }
 setTimeout(down,1000);
</script>
</body>
</html>

登入後複製

以上是網頁廣告特效代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1333

PHP教程

1279

C# 教程

1257

Related knowledge

夸克網盤怎麼分享到百度網盤？ Mar 14, 2024 pm 04:40 PM

　　夸克網盤和百度網盤都是很便利的儲存工具，不少的用戶都在詢問這兩款軟體互通嗎？夸克網盤怎麼分享到百度網盤？下面就讓本站來為用戶們來仔細的介紹一下夸克網盤的文件怎麼保存到百度網盤方法吧。夸克網盤的文件怎麼保存到百度網盤方法1、想要知道怎麼把夸克網盤的文件轉到百度網盤，首先在夸克網盤上下載需要保存的文件，然後打開百度網盤客戶端後，選擇壓縮檔案要儲存的資料夾，雙擊開啟該資料夾。　　2、開啟該資料夾後，點選視窗左上角區域的「上傳」。　　3、在電腦中找到需要上傳的壓縮文件，點選選

藍色畫面代碼0x0000001怎麼辦 Feb 23, 2024 am 08:09 AM

藍屏代碼0x0000001怎麼辦藍屏錯誤是電腦系統或硬體出現問題時的一種警告機制，代碼0x0000001通常表示出現了硬體或驅動程式故障。當使用者在使用電腦時突然遇到藍色畫面錯誤，可能會感到驚慌失措。幸運的是，大多數藍色畫面錯誤都可以透過一些簡單的步驟來排除和處理。本文將為讀者介紹一些解決藍屏錯誤代碼0x0000001的方法。首先，當遇到藍色畫面錯誤時，我們可以嘗試重

電腦頻繁藍屏而且每次代碼不一樣 Jan 06, 2024 pm 10:53 PM

win10系統是一款非常優秀的高智慧系統強大的智慧可以為使用者帶來最好的使用體驗，一般正常的情況下使用者的win10系統電腦都不會出現任何的問題！但在優秀的電腦也難免會出現各種故障最近一直有小伙伴們反應自己的win10系統遇到了頻繁藍屏的問題！今天小編就為大家帶來了win10電腦頻繁藍屏不同代碼的解決方法讓我們一起來看看吧。電腦頻繁藍屏而且每次代碼不一樣的解決辦法：造成各種故障碼的原因以及解決建議1、0×000000116故障原因：應該是顯示卡驅動不相容。解決建議：建議更換廠商原帶驅動。 2、

網路易雲音樂怎麼分享到微信朋友圈_網易雲音樂分享到微信朋友圈教程 Mar 25, 2024 am 11:41 AM

1.首先我們進入到網易雲音樂中，然後在軟體首頁介面中，點選進入到歌曲的播放介面中。 2.然後在歌曲播放介面中，找到右上方的分享功能按鈕，如下圖紅框所示位置，點擊選擇分享的管道;在分享管道中，點擊底部的「分享至」選項，然後選擇第一個“微信朋友圈”，即可將內容分享至微信朋友圈。

GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

如果您需要遠端編程任何設備，這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼？ GEUniversalRemote是一款遙控器，可用於控制多個設備，如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號，具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼，可在任何裝置上編程GE遙控器配備一組代碼，使其能夠與不同設備配合。您可

如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

身為一名程式設計師，對於能夠簡化程式設計體驗的工具，我感到非常興奮。借助人工智慧工具的幫助，我們可以產生演示程式碼，並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能，我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼？要開始，我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點，你需要進入擴充頁面，搜尋“PowerPlatformTool”，然後點擊Install按鈕

百度網盤怎麼分享文件給好友 Mar 25, 2024 pm 06:52 PM

近期，百度網盤安卓客戶端迎來了全新的8.0.0版本，這個版本不僅帶來了許多變化，還增添了許多實用功能。其中，最引人注目的便是資料夾共享功能的增強。現在，使用者可以輕鬆邀請好友加入，共同分享工作與生活中的重要文件，實現更便利的協作與分享。那麼究竟該如何分享給好友自己需要分享的文件呢，下文中本站小編就會為大家帶來詳細內容介紹，希望能幫助大家！ 1）開啟百度雲APP，先點選在首頁選擇相關的資料夾，再點選介面右上角的【...】圖示；（如下圖）2）接著點選「共用成員」一欄中的【+ 】，最後在勾選所

芒果tv會員帳號分享2023 Feb 07, 2024 pm 02:27 PM

芒果TV擁有各種類型的電影、電視劇、綜藝等資源，用戶可以在其中自由的選擇觀看。芒果tv會員不僅能夠看到全部的VIP劇而且還能夠設定最高清的畫質，幫助用戶爽快看劇，下面小編就給大家帶來一些芒果tv免費的會員帳號供用戶們使用，趕緊來看一看吧。芒果tv最新會員帳號免費分享2023：注意：都是收集的最新會員帳號，可以直接登入使用，不要隨意的修改密碼。帳號：13842025699密碼：qds373帳號：15804882888密碼：evr6982帳號：13330925667密碼：jgqae帳號：1703

See all articles

網頁廣告特效代碼分享

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題