js中动态样式 （圆球的滚动以及到某个位置停下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{height: 50px;width: 50px;background: yellow;border-radius: 50%;position: absolute;top: 50px;left: 0px;}
#wall{height: 500px;width: 2px;background:blue;position: absolute;left: 500px;}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
<div id="wall"></div>
<script type="text/javascript">
var o=document.getElementById('box');
var oQ=document.getElementById('wall')
var stu=2;
var index;
//墙的左边距
var d=parseInt(window.getComputedStyle(oQ,null).left);
//获取小球宽度
var w=parseInt(window.getComputedStyle(o,null).width);
//小球移动时最大左边距
var maxLeft=d-w;
//点击开始按钮，小球开始移动，碰到墙时，停下来
document.getElementById('btn').onclick=function () {
index=setInterval(showLeft,30);
}
//移动
function showLeft(){
var s=window.getComputedStyle(o,null).left;
s=parseInt(s);
//遇到墙了
if(s>=maxLeft){
clearInterval(index);
}else{
//修改left值
o.style.left=s+stu+'px';
}
}
</script>
</body>
</html>
滚动前
滚动后