21.05.2013, 20:10
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
|
Cкролл элементов по горизонтали?
Всем привет! Только учу JS и задался таким вопросом! А как сделать горизонтальный скролл элементов (допустим слайдер) захватом мыши? Ну нажимаем и ведем, наш слайдер скроллится, пока мы не отпустим мышь или не прекратим mousemove'ить 
Вот, что я смог (горизонтальный скрол колесиком мыши):
<style>
#catalog{
position: absolute;
width: 3150px;
height: 100%;
overflow-y: hidden;
z-index:5000;
}
.project{
width: 350px;
height: 100%;
background-repeat: no-repeat;
float: left;
list-style: none;
}
.project a{
display: block;
width: 100%;
height: 100%;
text-decoration:none;
}
</style>
<body>
<ul id="catalog">
<li class="project" style="background-image: url(images/1r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/2r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/3r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/1r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/2r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/3r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/1r.png);">
<a href="#">
</a>
</li>
<li class="project" style="background-image: url(images/2r.png);">
<a href="#">
</a>
</li>
</ul>
<script>
$("body, html").mousewheel(function(event, scr) {
this.scrollLeft -= (scr * 70);
event.preventDefault();
})
var hov=false;
$("#catalog ul li a").mouseup( hov = true );
$("#catalog ul li a").mousedown( hov = false );
alert(hov);
$("#catalog ul li a").mousemove(function() {
if (hov) {/* как же описать эту функцию, которая двигает? */}
})
</script>
</body>
Пишу пока в большинстве на jQuery, мало знаний для чистого JS, а jQuery облегчает.
|
|
21.05.2013, 20:13
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript.
Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.
На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/
Задавайте конкретные вопросы по ходу дела. |
|
21.05.2013, 20:17
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
|
dmitriymar,
Я не спорю, я пока чайник. Но всетаки, в какую мне сторону идти? Я как раз таки хочу попробовать все по очереди. Но меня очень заинтересовал именно этот вопрос. Потому что сайтов с таким скроллом очень мало, а решение реально интересное.
HTML я знаю идеально, но нужно развиваться
|
|
21.05.2013, 20:24
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от AfraidAlex
|
|
Но всетаки, в какую мне сторону идти?
|
в сторону изучить сначала что можно, как можно а потом делать, а не скажите мне какую функцию сюда -она не маленькая по размеру, и должна учитывать множество факторов в том числе небольшие движения мыши не обрабатывать и т.д , а есть ещё интерактив элементов страницы....
|
Сообщение от AfraidAlex
|
|
Но меня очень заинтересовал именно этот вопрос. Потому что сайтов с таким скроллом очень мало, а решение реально интересное.
|
В чём ? Здесь и адаптивная вёрстка, и непривычный пользователю интерфейс и .... Да и решение это для мобильных платформ. И вовсе не значит что для десктопов оно подходит. Колёсиком мыши проще и естественнее листать вниз-вверх чем вправо-влево и это интуитивно. в то время как на мобильных платформах интуитивно и естественно вправо влево
Последний раз редактировалось dmitriymar, 21.05.2013 в 20:31.
|
|
21.05.2013, 20:33
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
Сообщение от dmitriymar
|
|
в сторону изучить сначала что можно, как можно а потом как делать, а не скажите мне какую функцию сюда -она не маленькая по размеру, и должна учитывать множество факторов в том числе небольшие движения мыши не обрабатывать и т.д .
|
Я перерыл полгугла на поиски моих вопросов.. У меня есть логика функции и я пытаюсь её реализовать, но ничего не выходит. Вот и думал, что тут подскажут. Я не прошу функцию, я прошу меня направить. Я никогда не любил читать много непонятного текста, я человек практики. Если я захотел - сделаю, но сейчас я зашел в тупик. |
|
21.05.2013, 20:42
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от AfraidAlex
|
|
У меня есть логика функции и я пытаюсь её реализовать, но ничего не выходит. Вот и думал, что тут подскажут. Я не прошу функцию, я прошу меня направить. Я никогда не любил читать много непонятного текста, я человек практики. Если я захотел - сделаю, но сейчас я зашел в тупик.
|
Вот честно, я не вижу абсолютно никакой реализации . Вижу 3 строки навески обработчиков и всё и никакой реализации. Причём обработчики навешаны на ссылку(что будете делать когда курсор выйдет за её пределы?) , в то время как должны быть на документ или див. Ссылка блочная в ли , в то время как должны блоки информации двигаться -это 3 див причём с позиционированием один за пределами экрана слева(стопка дивов) , второй по экрану и третий(стопка дивов) справа от экрана . Вижу только 3 строки ничего не имеющих с реализацией общего.
И кстати, информации как это реализовывать море.
по моему Яндес на последнем вебминаре это вообще по косточкам разжевал
А что будете делать с адресами страниц для поисковиков, а что если контент "страницы не будет вмещаться в блок? -масштаб уменьшать до не читаемости?
А что будете делать с динамической подгрузкой страниц?
А что будете делать с ...?
Последний раз редактировалось dmitriymar, 21.05.2013 в 21:03.
|
|
21.05.2013, 21:06
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
|
Сообщение от dmitriymar
|
Вот честно, я не вижу абсолютно никакой реализации . Вижу 3 строки навески обработчиков и всё и никакой реализации. Причём обработчики навешаны на ссылку(что будете делать когда курсор выйдет за её пределы?) , в то время как должны быть на документ или див. Ссылка блочная в ли , в то время как должны блоки информации двигаться -это 3 див причём с позиционированием один за пределами экрана слева(стопка дивов) , второй по экрану и третий(стопка дивов) справа от экрана . Вижу только 3 строки ничего не имеющих с реализацией общего.
И кстати, информации как это реализовывать море.
по моему Яндес на последнем вебминаре это вообще по косточкам разжевал
А что будете делать с адресами страниц для поисковиков, а что если контент "страницы не будет вмещаться в блок? -масштаб уменьшать до не читаемости?
А что ...?
|
Я нарисую такой макет, который будет вмещаться
Не поверите, посмотрел полностью последний вебинар яндекса... Но.. )
По идее при клике на ссылку должен происходить скролл на 70.. Но его не происходит.. Не понимаю почему
$('#catalog li a').click(function() {
$('body, html').scrollLeft-=70;
return false;
});
|
|
21.05.2013, 21:15
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
Сорри, неправильно повесил обработчик. Наверно, показался совсем дураком в ваших глазах
$('#catalog li a').click(function() {
$('body, html').animate({scrollLeft: '+=10'});
return false;
});
Последний раз редактировалось AfraidAlex, 21.05.2013 в 21:19.
|
|
21.05.2013, 22:29
|
|
Интересующийся
|
|
Регистрация: 21.05.2013
Сообщений: 19
|
|
Что-то получилось, ездит, но ужасно и с багами.. Почему окошко иногда прыгает, а иногда нормально захватывается?
var hov=false, t=0;
$("#catalog li a").mousedown(function(e) {
hov=true
t = e.pageX; // начальная координата по Х
}).mouseup(function(e) {
hov=false
t = 0;
}).click(function(){return false});
$("#catalog li a").mousemove(function(e) {
if (hov) {
$('body, html').scrollLeft(t-e.pageX); // нач координата - конечн
}
})
UPD как можно отключить "перетаскивание" элементов в браузере? Допустим картинку можно вывести на рабочий стол, а мне нужно двигать элемент
Последний раз редактировалось AfraidAlex, 21.05.2013 в 22:41.
|
|
21.05.2013, 22:44
|
|
х.з
|
|
Регистрация: 21.11.2010
Сообщений: 4,588
|
|
|
Сообщение от AfraidAlex
|
|
Что-то получилось, ездит, но ужасно и с багами.. Почему окошко иногда прыгает, а иногда нормально захватывается?
|
потому что на каждое движение мыши функция выполняется (событие движения , перерисовка потом след движение перерисовка , а в очереди уже сотня движений стоит на обработку и перерисовку...). в то время как по движению мыши должно определятся что это скрол, блокироваться отслеживание мыши , выполнятся анимированная смена . причем при определении события скрола -не все движения мыши отслеживаются , чтобы не перегружать событиями очередь.
там реализации этого несколько сотен строк -причём на нативном, а не на джиквери какое проигрывает в скорости нативной реализации |
|
|
|
