3

我有一个变量正在增加，比如说从 0 到 99。

然后我有一个div，我想以与增加变量相同的速率移动，但我只想定义移动的两端（例如从上到下移动，我只定义最高位置和最低位置） . 其余部分应在主变量将其值从 0 更改为 99 时自动插值。

我得到的所有搜索结果都与动画有关。但这并不完全是动画，因为如果变量没有改变，div 不应该移动。你会如何在 javascript 中做到最好？

编辑：一些模拟代码（可能有语法错误）：

<html>

<body>

<div id="increase"></div>
<div id="move"></div>

</body>

</html> 

 <script>
var counter =0;
var topValue =50;
var bottomValue =150;
var interpolatedValue


$('#increase').click(){
counter++; 
}

$('#move').css(){
top: interpolatedValue; //this should be an interpolation between 50 and 150 based on the current counter value
}


</script>
4

4 回答 4

11

就像是：

// b - beginning position
// e - ending position
// i - your current value (0-99)
function getTween(b, e, i) {
    return b + ((i/99) * (e-b));
}

如果您的增量值与 0-99 不同，99则需要将函数中的硬编码更改为其他值，或者传入最大值。

于 2012-08-07T16:05:51.293 回答
7

例如，如果顶部和底部分别为 400 和 600，您可以通过一些简单的数学计算基于变量的位置。

var theVariable = 25; // 1 to 100
var top = 400;
var bottom = 600;
var distance = bottom - top;
var position = top + ((theVariable / 100) * distance); // 450
于 2012-08-07T16:07:46.830 回答
0 
var MyVar = 0, Max = 99;
setInterval(increaseMyVar,30)//Call increaseMyVar every 30ms

function increaseMyVar()//MyVar Will go from 0 - 99
{
    MyVar = ++MyVar % Max;
}

//Do whatever you want with MyVar
于 2012-08-07T16:10:15.503 回答
0

我可能会这样做，这样您就可以一次“动画”多个对象，而无需在脚本内部进行太多更改：

http://jsfiddle.net/pvKYX/

HTML：

<div class="mover" data-start="0" data-end="400" data-prop="margin-left"></div>

jQuery：

var p = 0;
function start(){
    $('.mover').each(function(){
        var $t = $(this);
       $t.css($t.data('prop'),$t.data('start')+($t.data('end')-$t.data('start'))/100*p);
    });
    if(p<100){
        p++;
        setTimeout(start,Math.round(Math.random()*500));
    }
}
start();

​</p>

于 2012-08-07T16:10:54.730 回答