Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.05.2013, 20:10
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 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 облегчает.
Ответить с цитированием
  #2 (permalink)  
Старый 21.05.2013, 20:13
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2013, 20:17
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

dmitriymar,
Я не спорю, я пока чайник. Но всетаки, в какую мне сторону идти? Я как раз таки хочу попробовать все по очереди. Но меня очень заинтересовал именно этот вопрос. Потому что сайтов с таким скроллом очень мало, а решение реально интересное.
HTML я знаю идеально, но нужно развиваться
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2013, 20:24
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от AfraidAlex
Но всетаки, в какую мне сторону идти?
в сторону изучить сначала что можно, как можно а потом делать, а не скажите мне какую функцию сюда -она не маленькая по размеру, и должна учитывать множество факторов в том числе небольшие движения мыши не обрабатывать и т.д , а есть ещё интерактив элементов страницы....

Сообщение от AfraidAlex
Но меня очень заинтересовал именно этот вопрос. Потому что сайтов с таким скроллом очень мало, а решение реально интересное.
В чём ? Здесь и адаптивная вёрстка, и непривычный пользователю интерфейс и .... Да и решение это для мобильных платформ. И вовсе не значит что для десктопов оно подходит. Колёсиком мыши проще и естественнее листать вниз-вверх чем вправо-влево и это интуитивно. в то время как на мобильных платформах интуитивно и естественно вправо влево

Последний раз редактировалось dmitriymar, 21.05.2013 в 20:31.
Ответить с цитированием
  #5 (permalink)  
Старый 21.05.2013, 20:33
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сообщение от dmitriymar Посмотреть сообщение
в сторону изучить сначала что можно, как можно а потом как делать, а не скажите мне какую функцию сюда -она не маленькая по размеру, и должна учитывать множество факторов в том числе небольшие движения мыши не обрабатывать и т.д .
Я перерыл полгугла на поиски моих вопросов.. У меня есть логика функции и я пытаюсь её реализовать, но ничего не выходит. Вот и думал, что тут подскажут. Я не прошу функцию, я прошу меня направить. Я никогда не любил читать много непонятного текста, я человек практики. Если я захотел - сделаю, но сейчас я зашел в тупик.
Ответить с цитированием
  #6 (permalink)  
Старый 21.05.2013, 20:42
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от AfraidAlex
У меня есть логика функции и я пытаюсь её реализовать, но ничего не выходит. Вот и думал, что тут подскажут. Я не прошу функцию, я прошу меня направить. Я никогда не любил читать много непонятного текста, я человек практики. Если я захотел - сделаю, но сейчас я зашел в тупик.
Вот честно, я не вижу абсолютно никакой реализации . Вижу 3 строки навески обработчиков и всё и никакой реализации. Причём обработчики навешаны на ссылку(что будете делать когда курсор выйдет за её пределы?) , в то время как должны быть на документ или див. Ссылка блочная в ли , в то время как должны блоки информации двигаться -это 3 див причём с позиционированием один за пределами экрана слева(стопка дивов) , второй по экрану и третий(стопка дивов) справа от экрана . Вижу только 3 строки ничего не имеющих с реализацией общего.
И кстати, информации как это реализовывать море.
по моему Яндес на последнем вебминаре это вообще по косточкам разжевал

А что будете делать с адресами страниц для поисковиков, а что если контент "страницы не будет вмещаться в блок? -масштаб уменьшать до не читаемости?
А что будете делать с динамической подгрузкой страниц?
А что будете делать с ...?

Последний раз редактировалось dmitriymar, 21.05.2013 в 21:03.
Ответить с цитированием
  #7 (permalink)  
Старый 21.05.2013, 21:06
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сообщение от dmitriymar Посмотреть сообщение
Вот честно, я не вижу абсолютно никакой реализации . Вижу 3 строки навески обработчиков и всё и никакой реализации. Причём обработчики навешаны на ссылку(что будете делать когда курсор выйдет за её пределы?) , в то время как должны быть на документ или див. Ссылка блочная в ли , в то время как должны блоки информации двигаться -это 3 див причём с позиционированием один за пределами экрана слева(стопка дивов) , второй по экрану и третий(стопка дивов) справа от экрана . Вижу только 3 строки ничего не имеющих с реализацией общего.
И кстати, информации как это реализовывать море.
по моему Яндес на последнем вебминаре это вообще по косточкам разжевал

А что будете делать с адресами страниц для поисковиков, а что если контент "страницы не будет вмещаться в блок? -масштаб уменьшать до не читаемости?
А что ...?
Я нарисую такой макет, который будет вмещаться
Не поверите, посмотрел полностью последний вебинар яндекса... Но.. )

По идее при клике на ссылку должен происходить скролл на 70.. Но его не происходит.. Не понимаю почему

$('#catalog li a').click(function() {
		$('body, html').scrollLeft-=70;
		return false;
});
Ответить с цитированием
  #8 (permalink)  
Старый 21.05.2013, 21:15
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сорри, неправильно повесил обработчик. Наверно, показался совсем дураком в ваших глазах

$('#catalog li a').click(function() {
		$('body, html').animate({scrollLeft: '+=10'});
		return false;
	});

Последний раз редактировалось AfraidAlex, 21.05.2013 в 21:19.
Ответить с цитированием
  #9 (permalink)  
Старый 21.05.2013, 22:29
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 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.
Ответить с цитированием
  #10 (permalink)  
Старый 21.05.2013, 22:44
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от AfraidAlex
Что-то получилось, ездит, но ужасно и с багами.. Почему окошко иногда прыгает, а иногда нормально захватывается?
потому что на каждое движение мыши функция выполняется (событие движения , перерисовка потом след движение перерисовка , а в очереди уже сотня движений стоит на обработку и перерисовку...). в то время как по движению мыши должно определятся что это скрол, блокироваться отслеживание мыши , выполнятся анимированная смена . причем при определении события скрола -не все движения мыши отслеживаются , чтобы не перегружать событиями очередь.
там реализации этого несколько сотен строк -причём на нативном, а не на джиквери какое проигрывает в скорости нативной реализации
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 14:05
Как сменить название класса у всех элементов AlexJ Events/DOM/Window 4 23.05.2012 09:33
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18
Удаление элементов через splice. возможно ли оптимизировать? Storan Общие вопросы Javascript 0 01.10.2011 21:16