このアニメーションをよりスムーズに左右にスクロールする方法を知っている人はいますか github からミリ秒ごとに実行される $.throttle クラスを使用していますか?ラッパーからスクロールコンテンツをアニメーション化して 0px ピクセルに戻すにはどうすればよいですか? 私の試みは失敗しました
HTML
<div id="wrapper">
<ul id="scroll-content">
<li class="item"><img src="http://placehold.it/100x150/09f" /></li>
<li class="item"><img src="http://placehold.it/100x150/2f2" /></li>
<li class="item"><img src="http://placehold.it/100x150/234" /></li>
<li class="item"><img src="http://placehold.it/100x150/342" /></li>
<li class="item"><img src="http://placehold.it/100x150/312" /></li>
<li class="item"><img src="http://placehold.it/100x150/131" /></li>
<li class="item"><img src="http://placehold.it/100x150/111" /></li>
<li class="item"><img src="http://placehold.it/100x150/222" /></li>
<li class="item"><img src="http://placehold.it/100x150/333" /></li>
<li class="item"><img src="http://placehold.it/100x150/122" /></li>
</ul>
CSS:
#wrapper {
width: 100%;
height: 170px;
overflow: hidden;
background-color: red;
}
#scroll-content {
width: 1050px;
}
.item {
float: left;
margin-right: 5px;
list-style-type: none;
}
jquery:
$(document).ready(function() {
var wrapper = $('#wrapper'),
content = $('#scroll-content');
wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));
function mousemove(e) {
var wrapper_width = wrapper.outerWidth(),
content_width = content.outerWidth(),
limits = 50,
center = wrapper_width / 2,
wrapper_pos = wrapper.offset(),
mousePos = Math.min(Math.max(e.pageX,wrapper_pos.left + limits), wrapper_pos.left+wrapper_width-limits);
//calculate new left margin
var tmp
if(e.pageX > center) {
tmp = (mousePos + 50 - 5) * (content_width - wrapper_width) / wrapper_width;
}else{
tmp = (mousePos - 50) * (content_width - wrapper_width) / wrapper_width;
}
content.stop().animate({
'margin-left': '-' + tmp + 'px'
}, 'fast', 'easeOutSine');
}
});