js制作浮动广告
时间: 2023-08-22 18:03:34 浏览: 100
首先,我们需要一个 HTML 页面,用来放置广告素材和 JavaScript 代码。下面是一个简单的 HTML 页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动广告</title>
<style>
#ad {
position: absolute;
top: 100px;
left: -200px;
width: 200px;
height: 200px;
background-color: yellow;
border: 1px solid black;
transition: left 0.5s ease;
}
</style>
</head>
<body>
<div id="ad"></div>
<script src="ad.js"></script>
</body>
</html>
```
注意到,我们在 head 中添加了一个样式,设置了广告的初始位置在页面左侧,并且添加了一个过渡动画效果。
接下来,我们编写 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()`,每 50 毫秒执行一次。在函数中,我们通过判断广告是否到达页面边缘,来控制广告的移动方向和位置。最后,我们通过修改广告元素的样式,来实现广告的移动。
最后,我们将 JavaScript 代码保存在 `ad.js` 文件中,并将其引入到 HTML 页面中。这样,我们就完成了浮动广告的制作。
阅读全文