1

JQuery を使用して画像をビューにスライドさせるのに問題があります。基本的に、ビューへのスライドは (.animate を使用して) 正常に機能しますが、ビューから (左から右へ) 押し出される必要がある画像は、実際には単に押し下げられているだけです。これが私のコードです：

var new_id = $(img).attr("id") - 1;
var src_tag = document.getElementById(new_id);
var src = "img/large/" + $(src_tag).attr("src").replace(/^.*[\\\/]/, '');
var img_tag = "<img src=\"" +  src  + "\" id=\"" + new_id + "\" 
                style=\"display:inline; position: relative; left:-944px; \" />";

$('#insert-image').prepend(img_tag);
$(img[0]).animate({left: '+=944px'}, 'fast');

そして私のhtml：

<div id="insert-image-wrapper">
    <div id="insert-image" class="main-content">
        <img src="img/large/colour-version.png" id="4" style="display:inline;">
    </div>
</div>

そして私のCSS：

div.main-content{
    width: 944px;
    margin-left:auto;
    margin-right:auto;
}

#insert-image-wrapper{
    width:100%; 
    background-color:#C0C0C0;
}

#insert-image{
    width:944px;
    height:518px;
    overflow: hidden;
    display:none;
}

ご協力いただきありがとうございます！

4

1 に答える 1

0

これはテストされていませんが、役に立つかもしれません:
css を次のように変更します:

#insert-image-wrapper{
    width:945px; 
    background-color:#C0C0C0;
    overflow-x:hidden;
}
div.main-content{
    margin:0 auto;
}
div.main-content img{
    float:left;
    display:inline;
    width: 944px;
}
#insert-image{
    width:2000px;
    height:518px;
    display:none;
}
于 2012-09-12T19:30:15.283 に答える