Question

我在容器内有图像，并且添加了使用平移放大/缩小的图像。一切正常，但只有一个问题。当我使用鼠标从左到右移动图像时。它不能完全在右侧移动，图像的某些部分仍隐藏在容器的左侧，我的意思是图像应像在上下左右移动一样，从一个边缘到另一个边缘移动。

请检查并提出最佳解决方案。

var start_zoom = 2.0;
$("#imgpos").simplePan({
    css:{},
    centerImage: false,
    mousewheel: true,
    zoomAnimate: true,
    initialZoom: start_zoom,
    minZoom: start_zoom,
    maxZoom : 10*start_zoom,
    zoomDelta : 0.10,
});

#imgpos{
    width:460px;
    height:184px;
    background:#ccc;
    display:block;
    margin:auto;
    overflow:hidden;
}
#imgpos > img{
    height: 100%;
    width: auto;
    display:block;
    margin:auto;
    position: relative;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    transition: 500ms;
    transform-origin: center top 0px;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://dev.vsjodha.com/pan-script.js"></script>
<div class="set-imagebox" id="imgpos">
<img id="drag-image" src="http://dev.vsjodha.com/RadWraps/tower.jpg">
</div>

移动图像时Javascript / CSS平移图像问题

0 个答案: