jQuery 是一款流行的 JavaScript 庫,廣泛用于前端開發。其中一項功能是實現網站加載時的開屏廣告效果。接下來,本文將介紹如何使用 jQuery 實現開屏廣告。
//HTML 代碼 <div id="ad"> <img src="ad.jpg" alt="廣告圖片"> <span id="close">×</span> </div> //CSS 代碼 #ad { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; } #ad img { display: block; width: 100%; height: 100%; } #ad #close { position: absolute; top: 20px; right: 20px; font-size: 30px; color: #fff; cursor: pointer; } //JavaScript 代碼 $(document).ready(function() { $('#ad').fadeIn(); //頁面加載時淡入廣告 }); $('#close').click(function() { $('#ad').fadeOut(); //點擊關閉按鈕淡出廣告 });
以上代碼中,HTML 部分包含了一個 id 為“ad”的 div 元素,其中包含一張廣告圖片和一個關閉按鈕。CSS 部分設置了廣告元素的樣式,其中包括了將廣告元素固定在頁面的定位方式。JavaScript 部分則是使用 jQuery 實現廣告的淡入和淡出效果,并通過點擊關閉按鈕來淡出廣告。
在實際開發中,還可以通過設置廣告的顯示時間來控制開屏廣告的展示時長,以及通過添加動畫效果來提升用戶體驗等。以上代碼只是一個簡單的開屏廣告實現示例,開發者可以根據項目需求自行調整。建議在使用開屏廣告時,注意不要過于嚴重干擾用戶體驗。
上一篇小紅點+css
下一篇小米新logo改了css