在網頁開發中,漂浮廣告是一種很常見的廣告形式,它可以吸引用戶的眼球,達到推廣產品或服務的目的。下面介紹一段基本的 HTML 漂浮廣告代碼。
<style> #float-ad { position: absolute; /* 設置為絕對定位 */ top: 100px; /* 廣告距離頁面上方的距離 */ left: 50%; /* 廣告距離頁面左邊的距離 */ margin-left: -150px; /* 設置廣告左外邊距為自身寬度的一半,使其居中 */ z-index: 100; /* 設置廣告層級 */ width: 300px; /* 廣告寬度 */ height: 250px; /* 廣告高度 */ background-color: #fff; /* 廣告背景顏色 */ border: 1px solid #ccc; /* 廣告邊框 */ box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 廣告陰影效果 */ padding: 10px; /* 廣告內邊距 */ line-height: 24px; /* 廣告字體行高 */ font-size: 14px; /* 廣告字體大小 */ } </style> <div id="float-ad"> <p>這里是廣告內容。</p> </div> <script> var floatAd = document.getElementById("float-ad"); var topPos = parseInt(floatAd.style.top); var direction = "down"; /* 初始向下移動 */ setInterval(function () { if (direction == "down") { topPos += 1; } else { topPos -= 1; } floatAd.style.top = topPos + "px"; if (topPos == 150) { direction = "up"; /* 到達底部后改變方向向上移動 */ } else if (topPos == 100) { direction = "down"; /* 到達頂部后改變方向向下移動 */ } }, 10); /* 每10毫秒移動一像素 */ </script>
上面的代碼中,首先定義了一個 ID 為 float-ad 的 div 元素,設置了其樣式為絕對定位,并指定了其位置、大小、背景顏色、邊框、內邊距、字體大小等屬性。接著使用 JavaScript 實現了廣告的向下移動和向上移動,以達到漂浮的效果。可以根據實際需求修改代碼中的參數來調整廣告的樣式和移動方式。