弹力小球

2018-07-16  本文已影响0人  新世界的冒险
<div id="imgDiv">
    <img src="img/fb.png" alt="" id="imgFb">
</div>
<script>
    var imgObj=document.getElementById('imgDiv');
    var scHeight=document.documentElement.clientHeight;  //可视区域高度
    var scWidth=document.documentElement.clientWidth;  //可视区域宽度
    var imgHeight=128;
    var imgWidth=128;
    var diffHeight=scHeight-imgHeight;    //移动到底部时的最大移动距离
    var diffWidth=scWidth-imgWidth;    //移动到右边边界时的最大移动距离
    var ys=0;   //移动的距离
    var yv=100;  //速度
    var xs=0;
    var xv=100;
    setInterval(function () {
        ys+=yv;
        if(ys>=diffHeight){
            ys=diffHeight;
            yv=-yv;
        }
        if(ys<=0){
            yv=-yv;
        }
        imgObj.style.top=ys+'px';
        xs+=xv;
        if(xs>=diffWidth){
            xs=diffWidth;
            xv=-xv;
        }
        if(xs<=0){
            xv=-xv;
        }
        imgObj.style.left=xs+'px';
    },100)

</script>
上一篇 下一篇

猜你喜欢

热点阅读