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 облегчает. |
Здравствуйте!
Судя по вашему сообщению, вы ну совсем не знаете javascript. Освойте основы языка и вопрос отпадет сам, полностью или частично. А с чем не справитесь - поможем. На сайте javascript можно начать изучать с учебника, раздел Основы javascript. Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/ Задавайте конкретные вопросы по ходу дела. |
dmitriymar,
Я не спорю, я пока чайник. Но всетаки, в какую мне сторону идти? Я как раз таки хочу попробовать все по очереди. Но меня очень заинтересовал именно этот вопрос. Потому что сайтов с таким скроллом очень мало, а решение реально интересное. HTML я знаю идеально, но нужно развиваться |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
И кстати, информации как это реализовывать море. по моему Яндес на последнем вебминаре это вообще по косточкам разжевал А что будете делать с адресами страниц для поисковиков, а что если контент "страницы не будет вмещаться в блок? -масштаб уменьшать до не читаемости? А что будете делать с динамической подгрузкой страниц? А что будете делать с ...? |
Цитата:
Не поверите, посмотрел полностью последний вебинар яндекса... Но.. ) По идее при клике на ссылку должен происходить скролл на 70.. Но его не происходит.. Не понимаю почему $('#catalog li a').click(function() {
$('body, html').scrollLeft-=70;
return false;
});
|
Сорри, неправильно повесил обработчик. Наверно, показался совсем дураком в ваших глазах
$('#catalog li a').click(function() {
$('body, html').animate({scrollLeft: '+=10'});
return false;
});
|
Что-то получилось, ездит, но ужасно и с багами.. Почему окошко иногда прыгает, а иногда нормально захватывается?
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 как можно отключить "перетаскивание" элементов в браузере? Допустим картинку можно вывести на рабочий стол, а мне нужно двигать элемент |
Цитата:
там реализации этого несколько сотен строк -причём на нативном, а не на джиквери какое проигрывает в скорости нативной реализации |
| Часовой пояс GMT +3, время: 18:40. |