1

我正在寻找与此非常相似的效果：

http://jsfiddle.net/G5Xrz/

function rnd(max) { return Math.floor(Math.random()*(max+1)) }

function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) {
var id = "newimage" + rnd(1000000);
$(container).append(
    "<img id='" + id + "' src='" + imgsrc + 
    "' style='display:block; float:left; position:absolute;" + 
    "left:" + rnd(maxwidth - imgwidth) + "px;" +
    "top:"  + rnd(maxheight - imgheight) + "px'>");
$('#' + id).fadeIn();
return id;
}

setInterval(
function() {
    showImage("#container", 400, 600, 
              "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
              100, 100);
}, 700);

但我更喜欢灵活的布局，即图像不受具有预定义高度和宽度的 div 约束，而是响应浏览器的尺寸。

以下代码似乎有一种更合适的方式来生成随机位置：

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

function makeNewPosition(){

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh,nw];    

}

function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.a').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);

$('.a').animate({ top: newq[0], left: newq[1] }, speed, function(){
  animateDiv();        
});

};

但是，我是 javascript 的初学者，我不知道如何将两者结合起来。

任何人都可以帮忙吗？

谢谢

4

1 回答 1

0

从第二个代码中获取这部分：

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

并使用这些变量h以及w浏览器的高度和宽度（负 50）作为第一个代码的这一部分中的适当参数：

setInterval(
function() {
    showImage("#container", 400, 600, 
              "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
              100, 100);
}, 700);

此外，第一个代码具有以下 HTML：

<div id="container" style="width:400px; height:600px; background: green; position:relative"></div>

这会将高度和宽度硬编码为像素值。您可以使用 CSS 百分比值来使宽度响应父容器的大小。但是，您将需要 JS 来正确设置高度；高度的百分比什么都不做

将所有这些放在一起（并删除“负 50”部分），您会得到：

jsFiddle 演示

<div id="container" style="width:100%; height:100px; background: green; position:relative"></div>

function adjustContainerHeight(height) {
    $('#container').height(height);
}

adjustContainerHeight($(window).height());

setInterval(
    function() {
        var h = $(window).height();
        var w = $(window).width();
        adjustContainerHeight(h);
        showImage("#container", w, h, 
                  "http://placekitten.com/" + (90 + rnd(10)) + "/" + (90 + rnd(10)), 
                  100, 100);
    }, 700);

这会在第一次加载页面时更新容器的高度，并在放置随机图像时再次更新。更健壮的代码将有一个单独的高度调整事件处理程序，该处理程序会在页面大小更改时更新高度。

于 2013-09-06T18:57:59.087 回答