cách lấy div để di chuyển ngẫu nhiên xung quanh một trang (sử dụng jQuery hoặc CSS)

Question

Tôi đã làm một số Googling để tìm câu trả lời cho điều này, nhưng tôi đã không có may mắn. Có thể vì tôi là một người nghiệp dư và tôi không biết các thuật ngữ thích hợp để tìm kiếm, nhưng có lẽ ai đó ở đây có thể chỉ đạo tôi đi đúng hướng hoặc giúp tôi.

Dù sao, tôi đang tìm cách để chuyển div một cách ngẫu nhiên, trôi chảy xung quanh một trang. Sẽ có một màu nền, sau đó hình ảnh này mà tôi muốn dường như ngẫu nhiên, vô cùng di chuyển xung quanh trang. Giống như nền của màn hình chính của đầu đĩa DVD, nơi "DVD" chỉ xuất hiện xung quanh.

Điểm bắt đầu của div không quan trọng, cũng như điểm kết thúc. Nó chỉ cần di chuyển ngẫu nhiên xung quanh trang trong khoảng thời gian người dùng ở trên trang đó.

Tôi có các kỹ năng HTML và CSS phong nha, các kỹ năng JS rất cơ bản và một số kinh nghiệm triển khai jQuery. Lý tưởng nhất, tôi muốn một cái gì đó mà tôi có thể thực hiện bản thân mình.

Cảm ơn trước !!!

Answer 1

Tiền đề cơ bản là tạo ra các giá trị vị trí và sử dụng hàm animate() của jquery để di chuyển div. Việc tính toán vị trí tiếp theo rất đơn giản, bạn chỉ cần một chút toán. Đây là một jsfiddle rất cơ bản tôi chỉ cần gõ lên. Nó có thể làm với bộ đếm thời gian trễ có thể, một tốc độ tính toán động dựa trên mức độ di chuyển của nó quá e.c.t. Nhưng nó mang lại cho bạn một điểm khởi đầu tôi hy vọng.

http://jsfiddle.net/Xw29r/

Cập nhật mã ví dụ với sửa đổi tốc độ:

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

Answer 2

Bạn có thể sử dụng jQuery Slide và Math.random(), tạo ra một số ngẫu nhiên để sử dụng như là khoảng cách để di chuyển và một số ngẫu nhiên để căn cứ quyết định của mình mà hướng di chuyển theo.

Answer 3

tốt bạn sẽ cần phải nắm bắt các kích thước của window

sau đó bạn sẽ cần phải generate random numbers<= các height và width của screen (trừ width/height của box)

cho hộp một vị trí absolute, và cung cấp cho các hộp đã được tạo ra x, ycoordinates

sau đó thiết lập một bộ đếm thời gian để gọi this function một lần nữa.

:)

$(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); 
}); 

Answer 4

Bạn sẽ muốn xác định biên giới của phim hoạt hình - các giá trị tối đa cho top và left thuộc tính là những gì ... Sau đó tất cả các bạn cần là .animate() chức năng để được gọi là một lần nữa và một lần nữa ...

Something như thế này nên làm việc -

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 5

EDIT Đã thêm chuyển động ngẫu nhiên, như màn hình chờ nhàn rỗi DVD nhưng có thể bị trả lại ở bất cứ đâu.

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 6

Hãy thử điều này:

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 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>