向左/向右滚动带有动画的图像答案

【问题标题】：Scroll left / right an image with animation向左/向右滚动带有动画的图像
【发布时间】：2014-04-14 15:18:36
【问题描述】：

请看看这个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 上进行测试，因此它也必须处理滑动/点击事件。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html image scroll

【解决方案1】：

DEMO

你需要动画jQuery对象scroller的scrollLeft属性，而不是HTMLObject scroller，因为前者有方法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
}

【讨论】：