Таким образом, у меня есть этот 100% -ный контейнер witdh с большим количеством изображений в нем. Я хотел бы панорамировать его горизонтально, когда я наводил указатель на родительский контейнер.
Я пришел довольно далеко, но у меня есть несколько проблем.
Вот скрипка
Сначала я должен установить, что маржа оставлена на основе процента, иначе она не будет отображать все изображения. Для этого мне нужно получить полную ширину внутреннего контейнера, но я не могу этого сделать.
$('.merken').mousemove(function (event) {
var left = event.pageX;
$('.slider').css({
'margin-left': '-' + left + 'px'
});
});
Контейнер большого пальца теперь имеет фиксированную ширину, но мне нужно сделать это автоматической шириной. Прямо сейчас это гарантирует, что изображения в контейнере не будут отображаться один за другим. Как это исправить?
.thumb-container { width:2000px;}
благодаря
Я не уверен, что вы хотите сделать. Но я думаю, что вы должны использовать метод.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'
});
});
Вы можете сделать что-то вроде этого:
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/$('.thumb-container').width();
$('.slider').css({
'margin-left': '-'+left+'%'
});
});
а также
.thumb-container{
width:200%;
}
Для тех, кто интересуется, исправил это следующим образом:
var conb = $('.slider').width();
$('.merken').mousemove(function(event){
var left = (event.pageX*100)/conb;
$('.slider').css({
'margin-left': '-'+left+'%'
});
});