波斯马BOSSMA Information Technology

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

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

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

前段时间写过几篇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(比如这里的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文件顶部的注释。

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

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

关键字:

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

目前有16 条评论

  1. Ancher 10楼:

    请问这个不是无缝的滚动吗?请问怎么修改能做到无缝滚动?谢谢。

发表评论