jquery : 鼠标滚轮上的动画列表 scrollLeft/scrollRight
jquery : animate list scrollLeft/scrollRight on mouse wheel
当用户使用鼠标滚轮时,我有以下代码来滚动 left/right。事件绑定良好,因为当用户尝试滚动时我转到 JS 代码,但代码从未生效。
<div id="contact_list">
<ul id="contact_list_ul">
<li>img1</li>
<li>img2</li>
<li>img3</li>
<li>img4</li>
<li>img5</li>
<li>img6</li>
<li>img7</li>
<li>img8</li>
<li>img9</li>
</ul>
</div>
CSS : (我用overflow-x因为我想隐藏滚动条)
#contact_list ul {
list-style-type: none;
white-space: nowrap;
overflow-x: hidden;
}
滚动的 JS 代码 right/left :
$("#contact_list_ul").mousewheel(function(event, delta, deltaX, deltaY) {
var o = '';
if (deltaY > 0){
$("#contact_list_ul").animate({scrollRight : '-=200'}, 'slow');
} else if (deltaY < 0) {
$("#contact_list_ul").animate({scrollRight :'+=200'}, 'slow');
}
});
我想 jquery 中没有名为 scrollRight
的方法,所以我认为应该是 scrollLeft
。
试试这个:
$("#contact_list_ul").mousewheel(function(event) {
var o = '';
if (event.deltaY > 0){
$("#contact_list_ul").animate({scrollLeft : '-=200'}, 'slow');
} else if (event.deltaY < 0) {
$("#contact_list_ul").animate({scrollLeft :'+=200'}, 'slow');
}
});
#contact_list ul {
list-style-type: none;
white-space: nowrap;
overflow-x: hidden;
width:400px;
border:solid 1px red;
}
#contact_list ul li{
width:200px; display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<div id="contact_list">
<ul id="contact_list_ul">
<li>img1</li>
<li>img2</li>
<li>img3</li>
<li>img4</li>
<li>img5</li>
<li>img6</li>
<li>img7</li>
<li>img8</li>
<li>img9</li>
</ul>
</div>
当用户使用鼠标滚轮时,我有以下代码来滚动 left/right。事件绑定良好,因为当用户尝试滚动时我转到 JS 代码,但代码从未生效。
<div id="contact_list">
<ul id="contact_list_ul">
<li>img1</li>
<li>img2</li>
<li>img3</li>
<li>img4</li>
<li>img5</li>
<li>img6</li>
<li>img7</li>
<li>img8</li>
<li>img9</li>
</ul>
</div>
CSS : (我用overflow-x因为我想隐藏滚动条)
#contact_list ul {
list-style-type: none;
white-space: nowrap;
overflow-x: hidden;
}
滚动的 JS 代码 right/left :
$("#contact_list_ul").mousewheel(function(event, delta, deltaX, deltaY) {
var o = '';
if (deltaY > 0){
$("#contact_list_ul").animate({scrollRight : '-=200'}, 'slow');
} else if (deltaY < 0) {
$("#contact_list_ul").animate({scrollRight :'+=200'}, 'slow');
}
});
我想 jquery 中没有名为 scrollRight
的方法,所以我认为应该是 scrollLeft
。
试试这个:
$("#contact_list_ul").mousewheel(function(event) {
var o = '';
if (event.deltaY > 0){
$("#contact_list_ul").animate({scrollLeft : '-=200'}, 'slow');
} else if (event.deltaY < 0) {
$("#contact_list_ul").animate({scrollLeft :'+=200'}, 'slow');
}
});
#contact_list ul {
list-style-type: none;
white-space: nowrap;
overflow-x: hidden;
width:400px;
border:solid 1px red;
}
#contact_list ul li{
width:200px; display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
<div id="contact_list">
<ul id="contact_list_ul">
<li>img1</li>
<li>img2</li>
<li>img3</li>
<li>img4</li>
<li>img5</li>
<li>img6</li>
<li>img7</li>
<li>img8</li>
<li>img9</li>
</ul>
</div>