前段时间写过几篇jquery实现滚动效果的文章，浏览量很大，由此看来还是有很多人需要这个东西的。前几篇文章都是分开写的，比如文字的滚动，图片的滚动，垂直滚动，水平滚动，这样没有很好的封装性， 不利于重用，使用起来难度系数也高一些。这几天参考以前的文章，将这个效果封装了下，以期更加灵活，更加易用。
这个程序目前已经实现：
1、文字、图片滚动
2、水平（左右）、垂直（上下）滚动
3、兼容多种浏览器：IE、Firefox、Opera、Chrome
4、设置滚动时间间隔和每次滚动距离
5、设置滚动区域宽度、高度
先来看看怎么用：
<
html
>
<
head
>
<
title
>
图片向左滚动
title
>
<
script
type
="text/javascript"
src
="bossma-jscroll.js"
>
script
>
<
script
type
="text/javascript"
>
window.onload
=
function
(){
//
参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
var
scroll
=
new
JScroll(
"
left
"
,
30
,
"
content
"
,
558
,
165
,
1674
,
165
,
1
);
scroll.Start();
};
script
>
head
>
<
body
>
<
div
id
="title"
style
="width:100%;height:40px;"
>
图片向左滚动
div
>
<
div
id
="content"
>
<
div
style
="float:left"
><
img
src
="images/1.png"
/>
div
>
<
div
style
="float:left"
><
img
src
="images/2.png"
/>
div
>
<
div
style
="float:left"
><
img
src
="images/3.png"
/>
div
>
div
>
<
div
id
="foot"
>
div
>
body
>
html
>
1、首先要在页面中定义一个滚动容器，比如这里：
<
div
id
="content"
>
里边是要滚动的元素，滚动元素的水平或垂直排列需要自己来写，但是不要写到容器的样式里边，你可以在容器内部添加元素，设置样式。
2、使用JavaScript初始化滚动，比如这里：
window.onload=function(){
//参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};
滚动速度是每次移动的时间间隔，越小越快，单位是毫秒；
滚动步长是每次移动的距离，单位是像素。
scroll.Start()就是启动滚动的意思了。
这样就可以了，是不是挺简单的。
你可以免费使用这个程序，只需要保留引用js文件顶部的注释。
点击这里下载源代码和例子 。
来源：http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/