js 实现弹力球效果

1.html代码：

<div id='imgid'>
    <img src="img/5.png">
</div>

2.js代码：

imgobj=document.getElementById('imgid');
//可视区域的高（视口高-图片所占的高度）
screenHeight=document.documentElement.clientHeight;
imgHeight=158;/*imgobj.clientHeight*/
diffHeight=screenHeight-imgHeight;

//可视区域的宽（视口宽-图片所占的宽度）
screenWidth=document.documentElement.clientWidth;
imgWidth=162;/*imgobj.clientWidth*/
diffWidth=screenWidth-imgWidth;

ys=0;
yv=100;

xs=0;
xv=100;

setInterval(function(){
//y轴坐标
ys+=yv;
if (ys>=diffHeight) {
ys=diffHeight;
yv=-yv;
}
if (ys<=0) {
yv=-yv;
}
imgobj.style.top=ys+'px';
//x轴坐标
xs+=xv;
if (xs>=diffWidth) {
xs=diffWidth;
xv=-xv;
}
if (xs<=0) {
xv=-xv;
}
imgobj.style.left=xs+'px';

},100);