jQuery水平平底锅，宽度为100％

Question

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

我走的很远，但是我有一些问题。

这是小提琴

1. 首先，我必须将左边距设置为基于百分比，否则它不会显示所有图像。 为此，我必须获得内部容器的完整宽度，但是我无法做到这一点。

    $('.merken').mousemove(function (event) { var left = event.pageX; $('.slider').css({ 'margin-left': '-' + left + 'px' }); }); 

2. 拇指容器现在具有固定的宽度，但是我需要将其设置为自动宽度。 现在，这可以确保容器中的图像不会一一显示。 我该如何解决？

    .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+'%'
            });

        });