用动画向左/向右滚动图像 [英] Scroll left / right an image with animation

问题描述

请查看 DEMO 。

>

通过使用这篇文章中的代码，我设法使通过单击左侧或右侧链接来水平移动图像。

我想达到的目的是让图片跳跃更顺畅。

以下是我的代码：

 < 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 =tArrowRhref =javascript：void（0）; onclick =scrollDiv（'r'，80）; return false;>右»< / a> 
< div class =wrapOut> 
< div id =scrollerclass =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（ '滚动'）; 
 if（dir =='l'）{
 scroller.animate（{scrollLeft：' -  = px'}，1000）; 
} 
 else if（dir =='r'）{
 scroller.animate（{scrollLeft：'+ = px'}，1000）; 
 
 
 $ / code $ / pre 
 
我在Windows 8上测试IE 10触摸屏桌面，所以它也必须处理轻扫/轻敲事件。
 
 
 
任何帮助将不胜感激！
解决方案
   DEMO   
 
 
 
您需要为 jQuery对象 scroller  scrollLeft 属性设置动画$ c> ，而不是 HTMLObject  scroller  ，因为它是前者的方法 animate 。
  var scrollDiv = function（dir，px）{
 var scroller = document。 getElementById（'scroller'），// HTMLObject 
 go; //保留'+ ='或' -  ='
 
 if（dir =='l'）go =' -  ='; 
 else go ='+ ='; //不需要else  - 如果在这里
 
 //`$（HTMLObject）`---> （jQuery Object）
 $（scroller）.animate（{
 scrollLeft：go + px //变成' -  = int'或'+ = int'
}，500）; //持续时间
} 
  
 
Please take a look at this DEMO.

By using the code from this post I've managed to make the image to move horizontally  by clicking the left or right links. 

What I'd like to achieve is to make the image jumps smoother somehow. 

Here's my code:
<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>
I tried to use the animate function, but with no success:
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);
    }
}
I'm testing on IE 10 on windows 8 on touchscreen desktop, so it has to work on swipe / tap events too.

Any help would be appreciated!
解决方案
DEMO

You need to animate the scrollLeft property of the jQuery object scroller, and not the HTMLObject scroller, because it's the former which has the method 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
}


                        
这篇关于用动画向左/向右滚动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！