JavaScript写一个移动广告
时间: 2024-05-12 12:18:12 浏览: 16
的代码。
首先,可以使用 HTML5 的 canvas 标签来添加一个广告图片,然后使用 JavaScript 技术使其可以移动。下面是一个简单的示例代码:
HTML 代码:
```html
<canvas id="myCanvas" width="300" height="250"></canvas>
```
JavaScript 代码:
```javascript
var x = 0;
var y = 0;
var speedX = 5;
var speedY = 5;
// 获取 canvas 元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制广告图片
var img = new Image();
img.onload = function() {
ctx.drawImage(img, x, y);
};
img.src = "广告图片的路径";
// 移动广告图片
function move() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y);
x += speedX;
y += speedY;
if (x >= canvas.width - img.width || x <= 0) {
speedX = -speedX;
}
if (y >= canvas.height - img.height || y <= 0) {
speedY = -speedY;
}
requestAnimationFrame(move);
}
move();
```
在上述示例代码中,我们获取了 canvas 元素,并向其中绘制了一个广告图片。然后使用一个 move 函数来移动该图片,通过不断的刷新画布来实现移动效果。该函数会首先清除画布,重新绘制图片,然后使其在 x 和 y 方向上移动,并且在到达画布边缘时,反弹回来。最后,使用 requestAnimationFrame 函数来不断调用 move 函数,实现动画效果。