Question

我想根据用户在插件中提供的X和Y值在整个页面中传播我的图像。目前，它采用了整套图像并将其作为条形放在我得到的最新两个坐标上。但我希望图像随机散布在用户定义的区域上。

flickrJSONParse: function (response) {
            $.each(response, function (item, i) {
                $.each(i.photo, function (photoItem, ItemI) {
                    var URL = "http://farm" + ItemI.farm + ".staticflickr.com/" + ItemI.server + "/" + ItemI.id + "_" + ItemI.secret + "_b.jpg";
                    var generated = $selector.append("<div class='item'><img class='image' src=" + URL + " alt=" + ItemI.title + " />" + "<a href='#' class='overlay'><h3 class='title'>" + ItemI.title + "</h3></a>" + "</div>");
                    generated.css({
                        position: "absolute",
                        left: Math.floor(Math.random()*(settings.Xmax-settings.Xmin+1)+settings.Xmin),
                        top: Math.floor(Math.random()*(settings.Ymax-settings.Ymin+1)+settings.Ymin)
                    })
                });
            });
        }

以上是我的代码，下面是我的CSS：

html, body, *{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
}
html{
    overflow-y: scroll;
}

.item{
    position: relative;
    float: left;
    line-height: 1em;
    display: inline;
    width: 100%;
    height: 100%;
}
.image{
    margin: 0;
    width: 20%;
    display: block;
}
.image:after{
    clear: both;
}
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    text-decoration: none;
    color: #FFF;
    display: none;
}
.overlay .title{
    font-size: 1em;
    text-align: center;
}
.item:hover .overlay{
    display: block;
}

这是jsFiddle：jsFiddle

Answer 1

我非常确定.append()会返回原始对象，而不是您追加的对象。也许类似于generated.find('#'+newItemId).css(/*css stuff*/);，其中newItemId是您刚刚插入的id的{{1}}属性。

基于随机数传播图像

1 个答案: