Всем привет! Только учу 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 облегчает.