Горизонтальная сковорода Jquery с элементом ширины 100%

0

Таким образом, у меня есть этот 100% -ный контейнер witdh с большим количеством изображений в нем. Я хотел бы панорамировать его горизонтально, когда я наводил указатель на родительский контейнер.

Я пришел довольно далеко, но у меня есть несколько проблем.

Вот скрипка

  1. Сначала я должен установить, что маржа оставлена на основе процента, иначе она не будет отображать все изображения. Для этого мне нужно получить полную ширину внутреннего контейнера, но я не могу этого сделать.

    $('.merken').mousemove(function (event) {
            var left = event.pageX;
    
            $('.slider').css({
                'margin-left': '-' + left + 'px'
            });
    
    
        });
    
  2. Контейнер большого пальца теперь имеет фиксированную ширину, но мне нужно сделать это автоматической шириной. Прямо сейчас это гарантирует, что изображения в контейнере не будут отображаться один за другим. Как это исправить?

    .thumb-container { width:2000px;}
    

благодаря

Теги:

3 ответа

1
Лучший ответ

Я не уверен, что вы хотите сделать. Но я думаю, что вы должны использовать метод.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'
            });


        });
  • 0
    Метод width () не показывает ширину за пределами области просмотра
2

Вы можете сделать что-то вроде этого:

скрипка

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

а также

.thumb-container{
        width:200%;
}
0

Для тех, кто интересуется, исправил это следующим образом:

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

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

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

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

        });

Ещё вопросы

Сообщество Overcoder
Наверх
Меню