Question

问题是我在javascript学习，但我还不知道。我想用随机位置做一个div。我发现了这个：

(function makeDiv(){
  var divsize = ((Math.random()*100) + 50).toFixed();
  var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
  $newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
  });

  var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
  var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

  $newdiv.css({
    'position':'absolute',
    'left': posx+'px',
    'top': posy+'px',
    'display': 'none'
  }).appendTo('body').fadeIn(100).delay(300).fadeOut(200, function(){
    $(this).remove();
    makeDiv(); 
  }); 
})();

这是我想要的，但不完全是。

我想修改这段代码，我在主体中有一个<div>元素，它的位置只是在鼠标悬停时发生变化。我现在有这个： http://screenshot.sh/m7WhBlRPAQ7vs
它不起作用，我不知道为什么。

Answer 1

试试这个。创建一个div并给它一个id =＆＃34; moveMe＆＃34;。这段代码在jQuery中，更容易学习js逻辑。

我添加了评论，因此您可以看到它正在做什么。

//first we want to get the width of the screen
var width = jQuery(window).width();
//now the height of the screen
var height = jQuery(window).height();

//when the mouse enters our div with an id set to moveMe preform a function
jQuery('#moveMe').mouseenter(function(){
  //randomly select a position on the y axis
  var topPos = Math.floor((Math.random() * height)+0);
  //randomly select a position on the x axis
  var leftPos = Math.floor((Math.random() * width)+0);
  //now move the div. Because we are looking to see if the mouse enters moveMe we can use this here, as the element is already slected.
  jQuery(this).css({position:'absolute', top:topPos+'px', left:leftPos+'px'});
});

Answer 2

尝试下面的js代码。这是你需要的吗？你有两条评论可以理解正在发生的事情

<script>
(function makeDiv(){
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    });

    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100); 
    //on the coded above the div shows up


//the code bellow adds the event mouseover to the div
//when fired, makes the div to fadeout and removed, then creates another div
$newdiv.mouseover(function(){
    $newdiv.fadeOut(200).remove()
    makeDiv()
    });
}());
</script>

Javascript div随机定位

2 个答案: