javascript - 具有 100% 宽度元素的 Jquery 水平平移

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

        });