Question

所以我有100％的容器，里面有很多图像。当我将鼠标悬停在父容器上时，我想将其水平平移。

我走得很远，但我遇到了一些问题。

首先我必须将剩余边距设置为百分比，否则它不会显示所有图像。要做到这一点，我必须获得内部容器的整个宽度，但我无法做到这一点。
```
$('.merken').mousemove(function (event) {
        var left = event.pageX;

        $('.slider').css({
            'margin-left': '-' + left + 'px'
        });


    });
```
拇指容器现在有一个固定的宽度，但我需要使它成为一个自动宽度。现在，这可以确保容器中的图像不会逐个显示。我该如何解决这个问题？
```
.thumb-container { width:2000px;}
```

由于

Answer 1

您可以这样做：

$('.merken').mousemove(function(event){
        var left = (event.pageX*100)/$('.thumb-container').width();
        $('.slider').css({
            'margin-left': '-'+left+'%'
        });             
});

和

.thumb-container{
        width:200%;
}

Answer 2

我不确定你想做什么。但我认为你应该使用.width（）jquery方法：

       $('.merken').mousemove(function(event){

            var left = event.pageX;
            var percentleft = left/$('.merken').width();
            var sliderleft = $('.slider').width()*percentleft;

            $('.slider').css({
                'margin-left': '-'+sliderleft+'px'
            });


        });

Answer 3

对于那些感兴趣的人，请修改如下：

var conb = $('.slider').width();

        $('.merken').mousemove(function(event){

            var left = (event.pageX*100)/conb;

            $('.slider').css({
                'margin-left': '-'+left+'%'
            });

        });

Jquery水平平底锅，100％宽度元素

3 个答案: