Question

所以我正在创建一个粒子模拟器，我正在使用css作为图形。我在JS中创建了两个不同的函数来管理页面上的X和Y位置。要做到这一点，我只需

.particle2 {
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 25px;
    position:absolute;
    top: yPosCalc;
    right: xPosCalc;
}

我知道这根本不起作用，但我不确定如何在css中使用它。我也尝试过使用

<div style="width: 50px;
    height: 50px;
    background: red;
    border-radius: 25px;
    position:absolute;
    top: yPosCalc;
    right: xPosCalc;"><p>particle1<p/>
<div/>

从那我就是完全相同的事情。我的小球只停留在右上角，他们不遵守任何功能规则。我不确定如何正确使用它或我甚至可以这样做。我不知道这是否会有所帮助，但这里是代码中较早使用的两个函数。

function yPosCalc(yPos, timeInAir, initialVelocityY, initialYPos) {
   yPos = -4.8 * timeInAir * timeInAir + initialVelocityY + initialYPos;
   if (yPos <= -2500) {
       yPos = 2499;
    }
    return yPos;
}

function xPosCalc(xPos, timeInAir, intialVelocityX, intialXpos) {
     xPos = intialVelocityX * timeInAir * .384 - 480;
     /* This is for average webs size 960/2500 to get into right scale then
     minus half of 960 to bring it into the middle (from the right side) */
     if (xPos >= 2500) {
         xPos = -2499;
     }
     if (xPos <= -2500) {
         xPos = 2499;

     }
     return xPos;
}

Answer 1

在Javascript使用中定位绝对div：

document.getElementById("divID").style.left="100px"; //new positon
document.getElementById("divID").style.top="100px"; //new positon

Answer 2

这看起来像是一个不错的小项目，所以在一些黑客和一些无限循环丢失了我的所有代码后，我想出了这个FIDDLE（我喜欢看到原子在屏幕上弹跳！）

通过x / y cooridnates，我把它放在开始/停止按钮之上，你可以看到代码正在做它应该做的事情，但我可以找到一种方法来保持弹跳球在那个小窗口。

所以你更了解你的方程式，并且可以解决它。

JS

var xPos = 60;
var yPos = 70;
var timeInAir = 2;
var initialVelocityX = 2;
var initialVelocityY = 3;
var initialXpos = 50;
var initialYpos = 50;
var timer;

$('.particle2').css({
                     top: initialYpos,
                     left: initialXpos
                     });

$('#startme').on('click', function(){
  timedCount();
                                     });

function timedCount()
{
  timer = setTimeout(function(){timedCount()},1000);
  xPos = xPosCalc( xPos, timeInAir, initialVelocityX, initialXpos);
  yPos = yPosCalc( yPos, timeInAir, initialVelocityY, initialYpos);
  $('.putmehere').html("x= " + xPos.toFixed(1) + ' -- ' + "y= " + yPos.toFixed(1));
  timeInAir = timeInAir + 2;
  $('.particle2').css({
                       top: yPos,
                       left: xPos
                       });
}

function xPosCalc( xPos, timeInAir, intialVelocityX, initialXpos) {
     xPos = intialVelocityX * timeInAir * 0.384 - 480;
     return xPos;
}

function yPosCalc (yPos, timeInAir, initialVelocityY, initialYPos)
{
  yPos = -4.8 * timeInAir * timeInAir + initialVelocityY + initialYPos;
  return yPos;
}

$('#stopme').on('click', function(){
   clearTimeout(timer);
});

从JS代码定位div

2 个答案: