波斯马BOSSMA Information Technology

一个新的用于实现网页元素滚动的Javascript类库 – fScroll

发布时间:2014年5月13日 / 分类:JavaScript / 7,101 次浏览 / 评论

三年前写过一个程序用于实现网页上部分元素的滚动效果,文章在此:http://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的引用:

2、添加滚动区域和元素

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

3、添加CSS样式

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

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

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

下载源码

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

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《一个新的用于实现网页元素滚动的Javascript类库 – fScroll

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论