如何让一个div随机移动一个页面（使用jQuery或CSS）
我一直在做一些谷歌searchfind答案，但我没有运气。 这可能是因为我是一个业余爱好者，我不知道要寻找什么合适的条件，但也许有人在这里可以引导我走向正确的方向或帮助我。
无论如何，我正在寻找一种方法来随机获得一个div，顺利地移动一个页面。 会有一个背景颜色，然后这个图像，我想看似随机，无限地移动页面。 非常像DVD播放器的主屏幕背景，“DVD”正在浮动。
div的出发点并不重要，也不是终点。 只需要在用户在该页面上的时间内随机移动页面。
我有体面的HTML和CSS技能，非常基本的JS技能，以及一些实现jQuery的经验。 理想情况下，我想要一些我可以实现的东西。
提前致谢！！！
基本的前提是生成位置值，并使用jquery的animate（）函数来移动div。 下一个职位的计算很简单，你只需要一点math。 这是一个非常基本的jsfiddle，我只是打了起来。 它可能会做一个延迟计时器，dynamic计算速度的基础上它有多远太移动等，但它给你一个起点，我希望。
使用速度修改器更新示例代码：
尝试这个：
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); 示例小提琴
那么你需要捕捉window的尺寸
那么您将需要generate random numbers <= screen的height和width （减去box的width / height ）
给这个盒子一个absolute位置，并给这个盒子生成x ， y coordinates
然后设置一个定时器来再次调用this function 。
🙂
$(document).ready(function() { randoBox = { width:$("body").width(), height:$("body").height(), x:0, y:0, el:null, time:1000, state:"active", init: function(){ el = $(document.createElement('div')); el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";"); el.html("DVD") el.height(100); el.width(100); $("body").append(el); }, move:function(){ this.y = Math.random()*this.height+1; this.x = Math.random()*this.width+1; el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";"); }, run:function(state){ if (this.state == "active" || state){ this.move(); setTimeout(function(){this.run()},this.time); } } } randoBox.init(); randoBox.run(true); });
编辑添加随机移动，如DVD空闲屏幕，但可以反弹到任何地方。
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; }
您可以使用jQuery Slide和Math.random（） ，生成一个随机数作为移动的距离，使用另一个随机数作为决定移动方向的依据。
您将要指定animation的边框 – top和left属性的最大值是多less…之后，所有您需要的是.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(); }); }
<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>
