弹力球案例 

<!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>

 

基于Sublime

posted @ 2019-06-11 18:50  水火和牛  阅读(366)  评论(0)  编辑  收藏  举报