Question

我一直在做一些谷歌搜索来找到答案，但我没有运气。可能是因为我有点像业余爱好者而且我不知道要搜索的正确术语，但也许有人可以引导我朝着正确的方向前进或帮助我。

无论如何，我正在寻找一种方法来随机获取div，平滑地移动页面。会有一个背景颜色，然后我想看似随机的这个图像，无限地在页面周围移动。就像DVD播放机主屏幕的背景一样，“DVD”只是漂浮在周围。

div的起点无关紧要，终点也不重要。它只需要在用户在该页面上的持续时间内随机移动页面。

我有很好的HTML和CSS技能，非常基本的JS技能，以及一些实现jQuery的经验。理想情况下，我想要一些我可以自己实现的东西。

提前致谢!!!

Answer 1

基本前提是生成位置值，并使用jquery的animate（）函数来移动div。下一个位置的计算很简单，你只需要一点数学。这是一个非常基本的jsfiddle我刚刚被击倒。它可以用一个延迟计时器，一个动态计算速度，根据它的移动距离e.c.t.但它给了你一个我希望的起点。

http://jsfiddle.net/Xw29r/

使用速度修饰符更新了示例代码：

http://jsfiddle.net/Xw29r/15/

Answer 2

试试这个：

function moveDiv() {
    var $span = $("#random");

    $span.fadeOut(1000, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(1000);
    });
};

moveDiv();
setInterval(moveDiv, 5000);

Example fiddle

Answer 3

您需要捕获window

的尺寸

然后您需要generate random numbers <= height和width screen（减去width / { {1}}的{1}}

为该框添加height位置，并为该框添加生成的box，absolute x

然后设置一个计时器再次呼叫y。

：）

coordinates

Answer 4

编辑添加随机移动，如DVD待机屏幕，但可以在任何地方反弹。

http://jsfiddle.net/ryXBM/2/

dirR = "+=2";
dirL = "+=2";

function moveDir() {
 if (Math.random() > 0.95) {
  swapDirL();
 }
 if (Math.random() < 0.05) {
  swapDirR();
 }
}

function swapDirL() {
    dirL == "+=2" ? dirL = "-=2" : dirL = "+=2"; 
}

function swapDirR() {
    dirR == "+=2" ? dirR = "-=2" : dirR = "+=2";   
}

setInterval (function() { $("#d").css("left", dirL); $("#d").css("top", dirR); moveDir(); } , 50)

<强> CSS

#d { position: absolute;
 left: 100px;
 top: 100px;
 width: 100px;
 height: 100px;
 background-color: #fce;   
}

Answer 5

您可以使用jQuery Slide和Math.random()，生成一个随机数作为移动距离，使用另一个随机数作为决定移动方向的基础。

Answer 6

您需要指定动画的边框 - top和left属性的最大值是多少...... 之后，您只需要一次又一次地调用.animate()函数......

这样的事情应该有效 -

var maxLeft = _left_border - $('#selectedElement').width(); // counter intuitively this is actually the right border
var maxTop = _top_border  - $('#selectedElement').height();
var animationDurration = _duration;

function randomAnimation(){
  var randomLeft = Math.floor(Math.random()*maxLeft);
  var randomTop = Math.floor(Math.random()*maxTop);

  $('#selectedElement').animate({
     left: randomLeft,
     top: randomTop
   }, animationDurration, function() {
     randomAnimation();
   });
}

Answer 7

<html>
    <head>
        <link rel="stylesheet" href="sample1.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                    $('.btn').mouseover(function(){
                        $(this).css({
                            left:(Math.random()*$(window).width()-20),
                            top:(Math.random()*$(window).height()-20),      
                        });
                    });              
            });
        </script>
    </head> 
    <body>
        <div class="btn" style="position: absolute">button</div>
    </body>
</html>

如何让div在页面上随机移动（使用jQuery或CSS）

7 个答案: