波斯马BOSSMA Information Technology

三年前写过一个程序用于实现网页上部分元素的滚动效果，文章在此：https://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/。三年后的今天重新审视这个程序，发现有不少可以改进的地方，由于改动过多，于是定义为一个新的Javascript类库：?fScroll。

浏览器兼容性

IE 6/7/8/9/10/11

Chrome （测试版本34.0.1847.131 m）

Firefox（测试版本29.0.1）

Opera（测试版本21.0.1432.57）

功能描述

1、支持水平（向左、向右）滚动、垂直（向上、向下）滚动。

2、支持各种html元素的滚动：图片、文字、图文混排等等。

3、循环无缝滚动。

4、支持自定义滚动速度：或快或慢，任您选择。

5、支持自定义滚动时间间隔，滚动时可以暂停一会继续滚动。

6、支持自定义滚动减速度：一次滚动距离较大时，可以出现减速度的效果。

演示Demo

说的这么好，还得靠实践来检验，这里准备了丰富的例子，欢迎测试：

1、点击查看 向左滚动 的Demo

2、点击查看 向右滚动 的Demo

3、点击查看 向上滚动 的Demo

4、点击查看 向下滚动 的Demo

使用步骤

1、添加JS引用

在要创建滚动效果的页面html的header中添加fScroll的引用：

<script type="text/javascript" src="fscroll.js"></script>

2、添加滚动区域和元素

<div id="scroll3_area">
<ul id="scroll3">
<li><img src="images/s1.png" /></li>
<li><img src="images/s2.png" /></li>
<li><img src="images/s3.png" /></li>
<li><img src="images/s4.png" /></li>
</ul>
</div>

scroll3_area为滚动区域的外包装，开发者自由定义布局样式，对fScroll无影响。
scroll3为滚动区域，要传递给fScroll处理，样式定义会对滚动效果产生影响，定义参考下个步骤。
ul中的li为要滚动的元素，样式定义也会对滚动效果产生影响，定义参考下个步骤。

3、添加CSS样式

在header中或样式表中为要滚动的元素和区域添加样式定义：

/*-----------------------------------scroll3 start-----------------------------------------*/
/* 滚动区域的外部包装样式，一个固定宽高带边框的长方形*/
#scroll3_area{
width:556px;
height:160px;
margin:0;
padding:0;
border:1px #666666 solid;
}

/*滚动区域的样式*/
#scroll3{
clear:both; /*建议清除浮动*/
width:548px; /*useCustomPlace=false时必须指定宽度*/
height:152px; /*useCustomPlace=false时必须指定高度*/
margin:4px;
padding:0;
}

/*滚动元素的样式*/
#scroll3 li{
padding:0; /*清除padding内边距*/
margin:0 0 0 20px; /*清除margin外边距，仅保留左侧margin，使图片之间产生20px的间距*/
border:1px #000000 solid; /*给li加一个边框*/
list-style:none; /*清除li的列表样式*/
}

#scroll3 li img{
display:block; /*清除IE6中li中图片下的空白*/
}
/*-----------------------------------scroll3 end-----------------------------------------*/

4、添加对scroll3进行滚动控制的初始化脚本
一般情况下需要把fScroll的初始化放到onload事件中，此时页面元素加载完毕，自动计算尺寸和位置时不会出现差错。也可以放到滚动区域html代码的后边，但是某些浏览器下自动计算尺寸和位置时会不正确，需要在CSS中指定尺寸或位置。

window.onload=function(){
var scroll3 =new fScroll({containerId:"scroll3",direction:"left"});
scroll3.Start();
}

参数为：
containerId（容器ID）：包含滚动内容的html对象的ID，必须提供。
direction（滚动方向）：四个方向 left top up down，必须提供。
interval（移动间隔时间）：每次移动间隔的时间，单位：毫秒，必须提供。
step（移动长度）：每间隔时间滚动内容移动的长度，单位：像素，必须提供。
deceleration（减速度）：移动指定“移动长度”时的减速度，数字越大移动越慢。
useCustomPlace（是否自定义排列）：自定义滚动子元素间的相对布局，否则通过html元素的样式获取或自动计算；自定义时需提供最后两个参数。
containerWidth（容器宽度）：滚动内容显示的宽度，单位：像素。
containerHeight（容器高度）：滚动内容显示的高度，单位：像素。
scrollContentWidth（滚动内容宽度）：滚动内容实际占用的宽度，单位：像素。
scrollContentHeight（滚动内容高度）：滚动内容实际占用的高度，单位：像素。

下载源码

还是源代码来的实在，更多示例点击此处下载。

关键字: 图片滚动 垂直滚动 文字滚动 无缝滚动 水平滚动 连续滚动 间断滚动