javascript - 用简单的JS让圆 动起来
本文介绍了javascript - 用简单的JS让圆 动起来的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想用简单的JS让圆 动起来，但是没有成功
<style media="screen">
#demo{
width: 200px;height: 200px;
background-color: rgb(235, 114, 97);
border-radius: 100%;
position: absolute;
top: 200px;left:50px;
}
</style>
</head>
<body>
<section>
<h2>利用JS函数 setTimeout()做简单的动画</h2>
<div class="" id="demo">
</div>
</section>
</body>
window.onload=elementMove;
function elementMove(){
var element=document.getElementById("demo");
// 获取位置 parseInt函数是取字符串里的数字 parse:解析
var elementX,elementY;
elementX=parseInt(element.style.left);
elementY=parseInt(element.style.top);
if (elementX==600 && elementY==400) {
return true;
}
if (elementX<600) {
elementX++;
}
if (elementY<400) {
elementY++;
}
element.style.left=elementX+"px";
element.style.top=elementY+"px";
setTimeout("elementMove()",10);
};
解决方案
这样？
HTML：
<style>
#demo {
width: 200px;
height: 200px;
background-color: rgb(235, 114, 97);
border-radius: 100%;
position: absolute;
top: 200px;
left: 50px;
}
</style>
<section>
<h2>利用JS函数 setTimeout()做简单的动画</h2>
<div class="" id="demo"> </div>
</section>JavaScript：
function getStyle(elem, prop) {
var elemStyle = window.getComputedStyle(elem).getPropertyValue(prop);
return parseInt(elemStyle);
}
function elementMove() {
var element = document.getElementById("demo");
var elementX, elementY;
elementX = getStyle(element, 'left');
elementY = getStyle(element, 'top');
if (elementX == 600 && elementY == 400) {
return true;
}
if (elementX < 600) {
elementX++;
}
if (elementY < 400) {
elementY++;
}
element.style.left = elementX + "px";
element.style.top = elementY + "px";
setTimeout(elementMove, 10);
};
elementMove();
怎么拿样式数值，
getStyle()里写了；setTimeout()虽然第一参数可以写字符串（eval运行），但是非常不建议；后续可以考虑用
requestAnimationFrame替换掉setTimeout;多看看MDN。
这篇关于javascript - 用简单的JS让圆 动起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
