波斯码BOSSMA Information Technology

JavaScript实现可以灵活控制的滚动效果

发布时间:2011年5月30日 / 分类:JavaScript / 次浏览 / 评论

关于实现滚动效果现在提供一个新的类库,功能更多,浏览器兼容性更强,点此移步过去看看。

前段时间写过几篇jquery实现滚动效果的文章,浏览量很大,由此看来还是有很多人需要这个东西的。前几篇文章都是分开写的,比如文字的滚动,图片的滚动,垂直滚动,水平滚动,这样没有很好的封装性, 不利于重用,使用起来难度系数也高一些。这几天参考以前的文章,将这个效果封装了下,以期更加灵活,更加易用。

这个程序目前已经实现:

1、文字、图片滚动

2、水平(左右)、垂直(上下)滚动

3、兼容多种浏览器:IE、Firefox、Opera、Chrome

4、设置滚动时间间隔和每次滚动距离

5、设置滚动区域宽度、高度

先来看看怎么用:

1、首先要在页面中定义一个滚动容器,比如这里:

里边是要滚动的元素,滚动元素的水平或垂直排列需要自己来写,但是不要写到容器的样式里边,你可以在容器内部添加元素,设置样式。

2、使用JavaScript初始化滚动,比如这里:

滚动速度是每次移动的时间间隔,越小越快,单位是毫秒;

滚动步长是每次移动的距离,单位是像素。

scroll.Start()就是启动滚动的意思了。

这样就可以了,是不是挺简单的。

你可以免费使用这个程序,只需要保留引用js文件顶部的注释。

点击这里下载源代码和例子 。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《JavaScript实现可以灵活控制的滚动效果

关键字:

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

目前有16 条评论

发表评论