Question

请查看 DEMO 。

通过使用this post中的代码，我设法通过点击左侧或右侧链接使图像水平移动。

我想要达到的目的是让图像以某种方式更顺畅地跳跃。

这是我的代码：

<script>
    var scrollDiv = function(dir, px) {
        var scroller = document.getElementById('scroller');
        if (dir == 'l'){
            scroller.scrollLeft -= px;
        }
        else if (dir == 'r'){
            scroller.scrollLeft += px;
        }
    }
</script>

<a class="tArrowL" href="javascript: void(0);" onclick="scrollDiv('l', 80); return false;">« left</a>
<a class="tArrowR" href="javascript: void(0);" onclick="scrollDiv('r', 80); return false;">right »</a>
<div class="wrapOut">
    <div id="scroller" class="wrapIn">
        <img id="" src="http://lorempixel.com/output/nature-q-c-1044-480-2.jpg" />
    </div>
</div>

我尝试使用animate功能，但没有成功：

var scrollDiv = function(dir, px) {
    var scroller = document.getElementById('scroller');
    if (dir == 'l'){
        scroller.animate( { scrollLeft: '-= px' }, 1000);
    }
    else if (dir == 'r'){
        scroller.animate( { scrollLeft: '+= px' }, 1000);
    }
}

我在触摸屏桌面上的Windows 8上测试IE 10，因此它也必须处理滑动/点击事件。

任何帮助将不胜感激！

Answer 1

<强> DEMO

您需要为 jQuery对象scrollLeft 的scroller属性设置动画，而不是 HTMLObject scroller ，因为它＆＃39; s前者有方法animate。

var scrollDiv = function (dir, px) {
    var scroller = document.getElementById('scroller'), // HTMLObject
        go;   // holds '+=' or '-='

    if (dir == 'l') go = '-=';
     else go = '+=';     // no need for else-if here

    // `$(HTMLObject)` ---> `jQuery Object`
    $(scroller).animate({
        scrollLeft: go + px  // becomes '-=int' or '+=int' 
    }, 500); // duration
}

使用动画向左/向右滚动图像

1 个答案: