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