js"无缝"滚动原理(解决IE与"火狐"的差异）

 前几天，因为要做一个图片的无缝滚动，所以上网查了一下资料。发现虽然网上有很多的相关教程，但却没有多少个能说得详细和透彻的，通常都是给出一大段代码让人看得头晕。但没办法，总不能因为一点代码而不却步吧。呵，，

   闲话少说了。首先要介绍一下的是DHTML中的offsetWidth、scrollLeft(我做的是左滚动，所以就以这两个为例，其它方向的都差不多的了）

   offsetWidth简单来就就是对象的宽度,如

这样在js中，document.getElementById("obj").offsetWidth所得到的就是120。

   scrollLeft是对象相对左边的滚动的位置。

  滚动原理：主要是利用js控制包含滚动对象的“外对象”(我都不知该怎样表达了）的scrollLeft来实现。另外配合CSS中overflow:hidden实现陷藏滚动条的效果。具体点说就是：在CSS中，当对象内部的内容超出对象本身的宽度或高度时，可以用overflow来控制是否允许滚动或自动适应（注意：这里是关键。如果不允许滚动，那么什么“无缝”都是空谈的了）。所以我们要滚动一些对象（如几张图片）时，我们就可以在这些对象的外面加上一个比它们总的宽度或高度要小的对象，这样，就可以利用overflow来实现滚动了。

下面是我所画的一个原理图（点击查看大图）：