Question

我目前正在制作一个2个图像的jquery图像滑块，您可以向左或向右滑动以查看前后照片。除了封面图片的位置，我有我想要的一切。大约40％的封面图像似乎移动到边框的右侧，但第二个图像是在边框内完善的位置。请告知我如何将封面图像完美地放在边框内，就像我的第二张图像一样。

HTML：

 <div class="con">
     <img src="warming1.jpg" class="imageOne">
     <div class="coverImage"></div>
     <div class="handle"></div>
     <script type="text/javascript">
         $(".handle").draggable({
             axis: "x",
             containment: "parent",
             drag: function () {
                 var position = $(this).position();
                 var positionExtra = position.left + 6;
                 $(".coverImage").width(positionExtra + "px");
             }
         });
     </script>
 </div>

CSS：

.con {
    top:2140px;
    left:10px;
    width: 280px;
    height: 230px;
    border: 2px solid;
    position: absolute;
    z-index:1
}

.con img {
    height: 100%;
    position: absolute;
}

.coverImage {
    position: absolute;
    background: url("warming2.jpg");
    background-size: auto 100%;
    width: 100%;
    height: 100%;
}

.handle {
    width: 0px;
    height: 100%;
    border-left: 12px solid #fff;
    position: absolute;
    left: 50%;
}

.handle:after {
    content: "DRAG";
    display: block;
    width: 60px;
    height: 60px;
    border: 2px solid #eee;
    border-radius: 50%;
    color: #999;
    line-height: 60px;
    font-weight: 300;
    text-align: center;
    background: #fff;
    position: absolute;
    left: -36px; top: 0; bottom: 0;
    margin: auto;
}

Answer 1

将图片1定位在包含边框的元素中：

获取带边框的元素宽度
获取第二张图片的宽度
设置pic1.width = borderElement.width - pic2.width
在borderElement.right上定位pic1 - pic1.width

jQuery图像滑块封面图像定位问题

1 个答案: