动画效果-飞翔的小鸟
程序员文章站
2024-03-18 19:59:40
...
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.bird{position:absolute;left:0;width:200px}
</style>
<script>
/*
匀速运动
* 速度保持不变的运动
飞翔小鸟：
* 不断改变left值
* setInterval()
*/
document.addEventListener("DOMContentLoaded",()=>{
let bird = document.querySelector('.bird');
//速度
let speed = 5;
//目标值
let target = window.innerWidth - bird.offsetWidth;
let timer = setInterval(()=>{
//在原来的left基础上改变
let left = bird.offsetLeft;
let += speed;
//结束条件
if(left>target){
clearInterval(timer);
//充值目标值
left = target
}
//设置css样式
bird.style.left = left + 'px'
},30)
})
</script>
</head>
<body>
<h1>匀速运动</h1>
<img src="img/bird.gif" class="bird/>
</body>
</html>效果图
上一篇： java贪吃蛇小游戏代码