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';