Javascript 随机img位置添加&；移除循环

我试图通过设置“left”和“top”css规则将图像添加到div中，并随机分配其在div中的位置

然后，我希望图像在显示中淡入一段时间，然后淡入淡出并循环显示在另一个位置

<div id="banner">
     <img src="http://i.imgur.com/BqsAMv7.png" alt="pin drop" class="pin"/>
</div>

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

$pin.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none'
}).appendTo( '#banner' ).fadeIn(500).delay(500).fadeOut(300, function(){
    $(this).remove();
}); 
})();

（函数为{
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$pin.css({
'位置'：'绝对'，
“左”：posx+“px”，
'top'：posy+'px'，
“显示”：“无”
}).appendTo（“#banner”）.fadeIn（500）.delay（500）.fadeOut（300，function（）{
$（this.remove（）；
}); 
})();

---

演示-

您没有定义

divsize

和

$pin

。此外，没有任何函数可以在每次引脚放置在随机位置时调用

建议使用以下代码：

（函数randomPin（）{
变量$pin=$（'.pin'）；
var$banner=$（“#banner”）；
var divsize=[$banner.width（）-$pin.width（），$banner.height（）-$pin.height（）]；
函数show（）{
var posx=（Math.random（）*（divsize[0]）.toFixed（）；
var posy=（Math.random（）*（divsize[1]）.toFixed（）；
$pin
.css({
“左”：posx+“px”，
“顶部”：posy+“px”
})
法丹先生（500）
.延迟（500）
.衰减（300，显示）；
}
show（）；
})();
#横幅{
位置：相对位置；
宽度：500px；
高度：500px；
边框：1px纯黑；
}
.别针{
位置：绝对位置；
显示：无；
}

图像的大小（从旧的尝试），我猜它会改变为39 px52px，在哪里定义它？你取位置的宽度和高度来考虑图像的大小，所以我猜它会像-[（$（文档）.WistHe（）-39 px））。这样每次都会把针放在同一个地方？你把事情弄复杂了->