1

我正在尝试按照这些指南更改 div 的位置，使其看起来流畅：

  • 一次非常小的增量
  • 每秒无数次
  • 在给定的角度（因此端点（）中的所有三角）

我已经测试了我的函数“endpoint()”，它处理 div 的计算和移动，它按预期工作。但是，当我尝试多次执行该功能时，它不起作用。

<style type="text/css">
.ball
{
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#00c0c6;
    position:absolute;
    left:0px;
    top:0px;
}
</style>

<div id="tehBall" class="ball"></div>

<script type="text/javascript">
    endpoint(slopeInRadians); //WORKS!  (changes position of the div)
    endpoint(slopeInRadians); //DOESN'T work (doesn't change the position of the div)
    endpoint(slopeInRadians); //DOESN'T work (same as above)
</script>

这是端点功能的代码：

function endpoint(m) 
{
    var oldX = getStyle("tehBall", "left");
    var oldY = getStyle("tehBall", "top");

    var xAxis = parseInt(oldX);
    var yAxis = parseInt(oldY); 

    var dX = (Math.cos(m));
    var dY = ((0 - Math.sin(m))); 

    xAxis += dX;
    yAxis += dY;

    xAxis = xAxis.toString();
    yAxis = yAxis.toString();   

    xAxis += "px";
    yAxis += "px";

    document.getElementById('tehBall').style.left = xAxis;
    document.getElementById('tehBall').style.top = yAxis;   

}

getStyle 的代码（用于端点函数）：

function getStyle(id, property){
    var elem = document.getElementById(id);
    var value = window.getComputedStyle(elem,null).getPropertyValue(property);


    return value;
}

任何帮助将非常感激

4

1 回答 1

2

无需处理样式，只需将坐标存储在全局变量中，如下所示：

请记住在将值放入样式时对其进行四舍五入，因为并非所有（旧）浏览器都支持浮点。

<script type="text/javascript">
var xAxis =0.0;
var yAxis = 0.0;
function endpoint(m) 
{
    var dX = (Math.cos(m)/* * d*/);
    var dY = ((0 - Math.sin(m))/* * d*/); 

    xAxis += dX;
    yAxis += dY;

    document.getElementById('tehBall').style.left = Math.round(xAxis) + 'px';
    document.getElementById('tehBall').style.top = Math.round(yAxis) + 'px';   

}
</script>
于 2012-08-10T06:07:11.420 回答