js运动小球在页面内回弹

原创

于 2018-01-30 19:12:05 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文通过JavaScript创建了一个小球，并实现了小球在页面内来回反弹的效果。通过设置横向和纵向的速度，以及判断小球是否触碰到页面边界来改变速度方向，确保小球在可视区域内运动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div{
            width: 100px;height: 100px;background-color: #ff0000;position: absolute;
            border-radius: 50%;         /* 生成一个球形  */
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var div = document.getElementById(