飘舞的小球

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wenjiangtao/p/10718671.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用HTML5、CSS3和JavaScript实现的简单网页动画效果，一个小球在浏览器窗口内飘动，碰到边界会反弹。通过设置元素的位置属性和监听定时器来更新小球的位置，实现了动态效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>飘舞的小球</title>
  <style type="text/css">
   div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    border-radius: 50px;
    background-color: cyan;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
   }
  </style>
</head>
<body>
  <div id="piao">飘啊飘</div>
</body>
<script type="text/javascript">
  // 设置变化速度
  var xSpeed = 10
  var ySpeed = 20
  // 获取变量
  var piao = document.getElementById('piao')
  // 获取尺寸
  var width = parseInt(getComputedStyle(piao)['width'])
  var height = parseInt(getComputedStyle(piao)['height'])
  // 设置周期定时任务
  var timer = setInterval(function() {
   // 获取当前位置
   var left = parseInt(getComputedStyle(piao)['left'])
   var top = parseInt(getComputedStyle(piao)['top'])
   // 设置新的位置
   left += xSpeed
   top += ySpeed
   // 对当前位置进行判定,防止小球跑出边界
   if (left <= 0 || left + width >= window.innerWidth) {
    xSpeed *= -1
   }
   if (top <= 0 || top + height >= window.innerHeight) {
    ySpeed *= -1
   }
   // 写入位置
   piao.style.left = left + 'px'
   piao.style.top = top + 'px'
  },100)
</script>
</html>