首页js 浮动广告

js 浮动广告

时间: 2023-07-08 17:06:11 浏览: 94

浮动广告一般使用CSS实现，可以通过以下步骤实现： 1. 创建一个div元素，并添加内容和样式。 2. 使用CSS的position属性将该div元素定位为绝对定位（absolute）或固定定位（fixed）。 3. 使用CSS的top、bottom、left、right属性来设置该div元素的位置。 4. 使用CSS的z-index属性来设置该div元素的层级，使其显示在其他元素之上。 5. 使用CSS的animation或transition属性来添加动画效果。 6. 使用JavaScript来控制浮动广告的出现和隐藏。下面是一个简单的示例代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮动广告</title> <style> #ad { position: fixed; top: 50px; right: 0; background-color: #ff0000; color: #fff; padding: 10px; z-index: 9999; animation: float 2s ease-in-out infinite; } @keyframes float { 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } } </style> </head> <body> <div id="ad">这是一个浮动广告</div> <script> window.onload = function() { var ad = document.getElementById("ad"); setTimeout(function() { ad.style.display = "none"; }, 5000); // 5秒后隐藏广告 }; </script> </body> </html> ``` 在上面的代码中，我们创建了一个id为“ad”的div元素，并将其定位为固定定位，位于页面的右上角。我们还使用了CSS的animation属性给该元素添加了一个左右浮动的动画效果。最后，我们使用JavaScript在页面加载完成后，延迟5秒后隐藏该广告。

阅读全文