波斯马BOSSMA Information Technology

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

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

三年前写过一个程序用于实现网页上部分元素的滚动效果,文章在此: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(滚动内容高度):滚动内容实际占用的高度,单位:像素。

下载源码

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

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

关键字:

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

发表评论