首页如何用JS实现51同城同款浮动广告

如何用JS实现51同城同款浮动广告

时间: 2024-02-22 10:56:36 浏览: 156

51同城同款浮动广告也可以使用类似的方法实现。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>51同城同款浮动广告</title> <style> #ad { position: fixed; top: 100px; left: -200px; width: 200px; height: 200px; background-image: url('ad.jpg'); background-size: cover; transition: left 0.5s ease; } </style> </head> <body> <div id="ad"></div> <script src="ad.js"></script> </body> </html> ``` 注意到，我们在样式中设置了 `position: fixed`，让广告始终在页面可见区域内浮动。同时，我们使用了一个背景图片来展示广告素材。接下来，我们编写 JavaScript 代码。代码中我们定义了一个函数 `moveAd()` 用来控制广告的位置。具体实现如下： ```javascript var ad = document.getElementById('ad'); var x = -200; var y = 100; var direction = 1; function moveAd() { if (x >= window.innerWidth - 200) { direction = -1; } else if (x <= -200) { direction = 1; } x += direction * 5; ad.style.left = x + 'px'; ad.style.top = y + 'px'; } setInterval(moveAd, 50); ``` 与之前的例子类似，我们定义了广告元素的 DOM 对象、初始位置和方向，并定义了 `moveAd()` 函数来控制广告的移动。最后，我们通过 `setInterval()` 方法来定时执行 `moveAd()` 函数，让广告自动浮动。最后，我们将 JavaScript 代码保存在 `ad.js` 文件中，并将其引入到 HTML 页面中。这样，我们就完成了51同城同款浮动广告的制作。

阅读全文