有一个列表,鼠标上去可以上下滑动这一种。
效果:
下面还有几个隐藏的li标签:
html代码:
<div class="left">
<ul class="music-list">
<li class="music-list-datails">热门</li>
<li class="music-list-datails">1</li>
<li class="music-list-datails">12</li>
<li class="music-list-datails">123</li>
<li class="music-list-datails">1234</li>
<li class="music-list-datails">12345</li>
<li class="music-list-datails">123456</li>
<li class="music-list-datails">1234567</li>
<li class="music-list-datails">13</li>
<li class="music-list-datails">134</li>
<li class="music-list-datails">135</li>
<li class="music-list-datails">136</li>
<li class="music-list-datails">137</li>
</ul>
</div>
css代码:
.left{
width:200px;
height: 720px;
display: inline-block;
overflow: hidden;
}
.music-list{
list-style-type: none;
width: 100%;
height:100%;
float: left;
}
.music-list-datails{
background: #242E37;
width: 100%;
height: 81px;
font-size: 24px;
color: #ffffff;
text-align: center;
vertical-align:middle;
line-height: 80px;
font-weight: 500;
}
.music-list-datails:hover{
background: #1C262E;
color: #9E7526;
}
怎么实现那种touch向上触摸时就向上滑动,向下触摸时就向下滑动,并且始终不会超出我的div.