Question

我正试图在链接http://www.gamesforthebrain.com/game/twincol/中移动这样的按钮，但我无法移动它。使用css动画我可以直接动画移动。这就是我所做的。

<div id="box" style='width:200px;height:200px;border:1px solid black;'/>

    <button id="one" type="button" >Button1</button>
    <button id="two" type="button" >Button2</button>
<button id="three" type="button">Button3</button>

<style>

button{
-webkit-appearance:none;width:40px;height:40px;padding: 0;text-align: center;vertical-align: middle;border: 1px solid red;font-size:10px;font-weight:bold;
}

#one, #two, #three
{
position:relative;

}
#one
{
-webkit-animation:levelseven 16s  infinite;
    -webkit-animation-direction:alternate;




}

#two
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_1 8s  infinite;

}

#three
{

animation-direction:alternate;

/* Safari and Chrome */
-webkit-animation:levelseven_2 10s  infinite;

}


@-webkit-keyframes levelseven /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:100px; top:200px;}
75%  { left:150px; top:50px;}
100% {background:cyan; left:0px; top:0px;}
}

@-webkit-keyframes levelseven_1 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {background:darkgoldenrod; left:0px; top:200px;}
100% { left:0px; top:0px;}
  }


@-webkit-keyframes levelseven_2 /* Safari and Chrome */
{
0%   { left:0px; top:0px;}
50%  {left:200px; top:0px;}
100% {left:0px; top:0px;}
}

</style>

My JsFiddle

Answer 1

你可以尝试这样的事情 Fiddle

$(document).ready(function(){
    animateDiv();

});

function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('.a').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();        
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

检查更新的小提琴

<强> Updated Fiddle

移动盒子对角线，反向等

1 个答案: