js實現拉幕效果的廣告程式碼_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js實現拉幕效果的廣告程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:40 PM

js 廣告拉幕效果

本文實例講述了js實現拉幕效果的廣告代碼。分享給大家供大家參考。具體如下：

這是一款拉幕效果的廣告代碼，廣告圖片像窗簾的幕布一樣慢慢的被拉上去了，縮小至一定大小後定格，目前來說，在一些大型的門戶網站中仍然可以見到這種效果。

運作效果截圖如下：

線上示範網址如下：

http://demo.jb51.net/js/2015/js-lm-style-adv-pic-style-codes/

具體程式碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>slide</title>
<style type="text/css"> 
html,body{
 width:100%;
 height:100%;
 margin:0px;
 border:0px;
 text-align:center;
}
div{
 margin:auto;
 overflow:hidden;
}
</style>
</head>
<body>
<script type="text/javascript"> 
function tag(obj){
 return document.getElementsByTagName(obj)[0];
}
window.onload=function(){
 setTimeout("slideUp();",1000);
}
function slideUp(){
 if(tag("div").offsetHeight>0){
  if(tag("div").offsetHeight>10){
   tag("div").style.height=tag("div").offsetHeight-10+"px"
   setTimeout("slideUp();",20);
  }else{
   tag("div").style.display="none";
   tag("img").src="images/wall8.jpg";
   tag("div").style.display="block";
   slideDown();
  }
 }
}
function slideDown(){
 if(tag("div").offsetHeight<80){
  if(tag("div").offsetHeight<70){
   tag("div").style.height=tag("div").offsetHeight+10+"px";
   setTimeout("slideDown();",20);
  }else{
   tag("div").style.height="80px";
  }
 }
}
</script>
<div><img src="images/wall8.jpg"></div>
</body>
</html>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

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

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1421

Laravel 教程

1315

PHP教程

1266

C# 教程

1239

Related knowledge

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

360瀏覽器推薦的廣告如何關閉？如何關閉電腦360瀏覽器推薦的廣告？ Mar 14, 2024 am 09:16 AM

　　360瀏覽器推薦的廣告如何關閉？相信很多的用戶都在使用360瀏覽器，不過這款瀏覽器有時候會彈出廣告，這就使得很多的用戶們都十分的苦惱，下面就讓本站來為用戶們來仔細的介紹一下如何關閉電腦360瀏覽器推薦的廣告吧。　　如何關機360瀏覽器推薦的廣告？　　方法一：　　1、開啟360安全瀏覽器。　　2、找到右上角「三橫槓」標誌，點選【設定】。　　3、在彈出的介面左側工作列中找到【實驗室】，勾選【啟用「360熱點資訊」功能】即可。　　方法二：　　1、先雙擊

新版Edge如何關閉廣告？封鎖Edge個人化廣告的方法 Mar 14, 2024 am 11:37 AM

　　許多用戶更新Edge瀏覽器之後，發現介面上多了很多的廣告，例如新標籤頁的底部有多個網站的連結還標註廣告字樣，看起來非常煩人。那有什麼辦法可以關閉Edge瀏覽器個人化廣告嗎？小編在網路上找了很多辦法，以下就分享給大家一個關閉廣告的小技巧。　　新版Edge如何關閉廣告？　　1、開啟Edge瀏覽器。　　2、點選右上角的【•••】。　　3、點選【設定】。　　4、點選【隱私、搜尋和服務】。　　5、關閉」個性化你的web體驗「右側的開關，即可關閉微軟推送的個性

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

朋友圈廣告怎麼徹底關掉 Mar 03, 2024 pm 12:31 PM

用戶在刷朋友圈的時候會遇到很多的廣告，那麼廣告要怎麼徹底關掉呢？用戶需要在我的內部點擊設置，然後找到個人資訊與權限，然後點擊個人化廣告管理，將廣告個人化關閉就行。這篇朋友圈廣告徹底關掉方法介紹就能告訴大家具體的操作方法，趕快看看吧！微信使用教學朋友圈廣告怎麼徹底關掉答案：無法徹底關掉，只能關掉個人化推薦具體方法：1、先點擊我，然後找到裡面的設定。 2、找到個人資訊與權限選項。 3.點擊裡面的個人化廣告管理功能。 4.點選廣告個人化右側的開關，關機就可以了。怎麼關閉廣告：1、找到朋友圈的廣告。 2、點擊右

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

js實現拉幕效果的廣告程式碼_javascript技巧

熱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版

熱門話題