0

サンプル用に3枚の画像があります。centerを使用して、親画像の正確な下画像アイコンを設定したいjquery。画像アイコン（下）を含む をハードコードでピクセル単位"left" positionで設定することでそれを行いました。ただし、画面サイズとの数に応じて設定する必要があります。ユーザーがオンの場合、他の使用についても同様に正確に表示する必要がありますdiv"left"parent imagesclickimage1small image iconbottom centeredParent imageimagesjquery

JSFiddle でコードを表示する

ここに画像の説明を入力

助けてください！

4

2 に答える 2

1

中央揃え (text-align:center) で「ピンク」の画像を保持する div が必要です。次のスニペットを既存の css と javascript に使用します

<style>
.image-holder
{
 display:block;
 height: 20px;margin-top: 100%;
 text-align: center;
}

.image
{
  height:20px;width:20px;vertical-align: top;
}    
</style>

<script>
$(document).ready(function(){
  // use your selector to find the appropriate div, I am using div for this sample
    $("div").on("click",function(){
    $(this).append("<div class='image-holder'><img src='imagepath' class='image' ></div>");
  });
});
</script>
于 2013-09-19T08:50:21.550 に答える
0

Thanks for replying! I have modified my code including your code and with certain changes to work extact what i need is as follows:

In css:

.mydiv {
    background: url("http://placehold.it/200x200&text=Shekhar img1") no-repeat;
    height: 150px;
    width: 150px;
    position: relative;
    margin:10px;
    float:left;

}
.row {
    position: relative;
    left: -50%
}

.image-holder
{
 display:block;
 height: 20px;
 text-align: center;
    margin-top: 101%;
}

.image
{
  height:20px;width:20px;vertical-align: top;
}

In html markup:

<div id="header-image1" class="mydiv">

</div>
<div id="header-image2" class="mydiv">

</div>
<div id="header-image3" class="mydiv">

</div>

<div id="header-image4" class="mydiv">

</div>

In script:

$(document).ready(function(){

    $(".mydiv").on("click",function(){
    $("#dynamicdiv").remove();
    $(this).append("<div id='dynamicdiv' class='image-holder'><img src='imagepath' class='image' ></div>");
  });
});

NOTE: Use of "on" is NOT SUPPORTED in version 1.7. So, have used 2.0.0 version.

View Full Working Code Here

Thanks @Lav G

于 2013-09-19T12:57:33.203 に答える