我在使用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;
}


谢谢你的帮助!

最佳答案

这未经测试,但可能会有所帮助:
将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;
}

07-24 09:50
查看更多