弹力球案例

最新推荐文章于 2023-06-12 12:20:09 发布

转载最新推荐文章于 2023-06-12 12:20:09 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luyuandatabase/p/11005402.html

文章标签：

#java #python #c/c++

本文介绍了一个使用HTML、CSS和JavaScript实现的弹力球动画案例，球体会在浏览器窗口内反弹，展示了基本的动画原理和网页布局技巧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹力球案例</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #imgid{
            width: 128px;
            height: 128px;
            position: absolute;
            top: 0px;
            left: 0px
        }
        #imgid img{
            width: 128px;
            height: 128px;
        }
</style>

</head>
<body>
    <div id="imgid">
        <img src="img/Basketball.png" alt="#">
    </div>
<script>
    imgdemo=document.getElementById('imgid');
    screenHeight=document.documentElement.clientHeight;//可视区域的高
    screenWidth=document.documentElement.clientWidth;//可视区域的宽
    imgheight=128;//图片的高
    imgWidth=128;//图片的宽
    Height=screenHeight-imgheight;//差值
    Width=screenWidth-imgWidth;
    ys=0;//初始值
    yv=10;//变化值
    xs=0;
    xv=10;
    //设置一个定时器
    setInterval(function(){
        //y轴
        ys+=yv;//每10毫秒相加
        if(ys>=Height){
            ys=Height;
            yv=-yv;//设置yv为负值
        }
        if(ys<=0){
                yv=-yv;//到顶端时设置为正值
            }

        //x轴
        xs+=xv;
        if(xs>=Width){
            xs=Width;
            xv=-xv;
        }
        if(xs<=0){
                xv=-xv;
            }
        
        imgdemo.style.top=ys+'px';
        imgdemo.style.left=xs+'px';
        document.title=ys+"-"+xs;
    },10);
</script>
</body>
</html>