HTML 頁面彈出一個圖片自動消失

阿新 • • 發佈：2019-01-05

HTML 頁面彈出一個圖片自動消失

適用於網站首頁的提示比如購物網站提示送積分等
首先需要一個放置圖片的容器

<img src="#" class="jump_img">

隨後需要給這個類一個樣式

<style type="text/css">
	.jump_img
		 {position:absolute;
			 z-index:99999;
			 width:80%;
			 height:80%;
			 top:50%;
			 left:50%;
			 margin:-20% 0 0 -40%;
		 }
</style>
//根據 寬  高  上   左   來除錯圖片顯示的位置

最後就剩下能夠驅動這個容器的指令碼了

<script type="text/javascript">
	$(document).ready(function() {
		//倒計時消失      使用 毫秒值
		$(".jump_img").delay(5000).fadeOut();
	})
</script>

簡單的一個定時彈圖片就好了我的解析度是1920的筆記本其他的請自己除錯比例

直接在img標籤上新增點選事件

如果不想用a來包一層的話，那麼直接在img標籤上新增onclick來點選跳轉，

<img src="img/logo.png" 
 alt="" onclick="window.open('index.html')" style="cursor: pointer;"/>

jQuery 效果 - fadeOut() 方法

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $ 
("p").fadeOut()
  });
  $(".btn2").click(function(){
  $("p").fadeIn();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

HTML 頁面彈出一個圖片自動消失

HTML 頁面彈出一個圖片自動消失適用於網站首頁的提示比如購物網站提示送積分等首先需要一個放置圖片的容器 <img src="#" class="jump_img"> 隨後需要給這個類一個樣式 <style type="text/css">

自定義的彈出浮動框-自動消失

彈出一個圖片

首先這個圖片要是png的，如果我們希望這個圖片不是全屏的就得把這個png的圖片上下左右留白。最主要的是利用一個遮罩層把背景色全屏的遮住，在最上面放一個圖片。 <div class=”fade”></div> 這是一個遮罩層 <img sr

如何用jQuery實現彈出一個層然後過3秒鐘後自動變淡然後消失

<!DOCTYPE HTML> < html > < head > < meta charset = UTF -8> &l

zTree 資料載入前，彈出一個載入頁面提醒

jsp頁面新增一個div <div id="Loading"><span style="font-size:30px ;color:#EBF7EE">正在載入，請稍候……</span></div> <script> $(f

python學習之網站的編寫（HTML，CSS，JS）（十五）----------示例，彈出一個背景為半黑色，前面是白框的彈窗功能（已經編好的框架）

效果圖，程式碼直接可應用，按自己的需要在其中加入想要的內容：程式碼及講解： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

確認框的使用。彈出一個確認框，Ajax提交一個請求，重新整理頁面。

檢視： <td> @if (item.ReviewProject.DeclareState == DeclareOrReviewState.正在進行 && !item.IsSubmit)

WPF彈出一個視窗，並自動關閉

最近用WPF做了一個小的demo，由於對於WPF不是很熟悉，在這個過程中遇到不少問題，這篇文章便是針對某個小需求的整理，這個需求便是：在WPF中，如何彈出一個視窗，並讓它定時自動關閉。我記得我最早的思路是在主視窗中開啟一個執行緒，這個執行緒每隔1s休眠一次，用這個執行緒來

頁面提交時, 彈出一個等待層

最近幾個月都沒有好好打理自己的部落格了, 今天一看, 訪問量快一萬了, 在此多謝那些關照的朋友了!還是言歸正傳, 請往下看:<HTML><HEAD><META content="MSHTML 6.00.2800.1586" name=GENERA

一個很好的頁面彈出div的寫法

主要就是一個css和一個js，然後再自己程式碼中結果即可 css檔案：popwindow.css .pop_window_show{visibility: visible; } .pop_window_hidden{display: none; } .pop_windo

js通過按鈕button點選彈出一個新的視窗頁面

<SCRIPT LANGUAGE="javascript"> 　　<!-- 　　window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scro

實現彈出一個隱藏的div視窗，body頁面變成灰色並且不可被編輯

當需要實現如下圖操作，點選服務評分，出現一個服務評分視窗用來填入相關表單資訊可是這會讓我們開啟服務評分介面時還可以點選body主介面中的購物車等連結，這是不對的，因此我們可以使用層疊樣式表來指定外圍

jQuery，實現想彈出什麼，彈出什麼（彈出提示、彈出一個新的頁面等等）

先要明白，彈窗的原理是什麼，彈出是假，重繪是真。其實是出發某個JavaScript之後，對當前頁面進行了重繪（即重新組合html頁面給瀏覽器，瀏覽器重新解析，給人一種彈出的感覺）。 -------因此，彈出其實是重繪。框架一般都提供了重繪的方法，來實現彈出效果，如

實現頁面上點選小圖片,彈出大圖片的效果

<html><body> <a href="javascript:PassBet('images/products_1.jpg');"><img src="images/products_shouji_1.jpg" border

MFC中按下Buttonbutton，彈出一個窗體的同一時候關閉本窗體

彈出 oda size win button class 隱藏 nbut top ?? CMyDlg *dlg = new CMyDlg(); //新建一個CMyDlg對象 this->ShowWindow(SW_HIDE);

Java Selenium - 處理頁面彈出窗

cnblogs clas java iterator 循環當前 iter string ren 1. 得到當前窗口句柄 2. 得到所有窗口句柄 3. 循環找到目標窗口 String currentWindow = driver.getWindowHandle(); S

微信內置瀏覽器瀏覽H5頁面彈出的鍵盤遮蓋文本框的解決辦法

document android 微信內置瀏覽器 list 內置 time In nbsp out 最近在做微信公眾號的內嵌頁面，發現點擊輸入框時鍵盤蓋住文本框，找到一段代碼解決了這個問題。 iOS和android手機都已親測，需要的可以直接拷貝到代碼中使用。 js代碼

每天00:00，MySQL定時彈出一個taskeng.exe

end host led 問題 start win cat 運行時 update 程序運行時，MySQL彈出一個taskeng.exe. 內容如下:=====================Start Initialization====================My

robot framework 遇到頁面彈出框上傳檔案時處理

最近在做公司公司頁面自動化的時候遇到上傳檔案的彈出框，如下圖，在點選選擇檔案的時候回彈出一個檔案選擇視窗，記錄下處理方法下載安裝AutoIt 軟體，安裝python 安裝AutoItLibrary，這個過程網上一大堆，不做敘述將AutoItLibrary匯入到robotframew

如何禁用MySql總是定時彈出一個MySQLInstallerConsole.exe的視窗

如何禁用MySql總是定時彈出一個MySQLInstallerConsole.exe的視窗禁用mysql總是彈出一個安裝框的定時任務這一條安裝命令，Installing MySQL 5.6.21 using MySQLInstallerConsole.exe win10狀態下，從

HTML 頁面彈出一個圖片 自動消失