分享一个可以灵活控制的实现Javascript滚动效果的程序
前段时间写过几篇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 >图片向左滚动</div>
<div >
<!--
滚动元素内部的水平排列需要自己来写，不要写到容器div（比如这里的id:content）的样式中。
-->
<div ><img src="images/1.png" /></div>
<div ><img src="images/2.png" /></div>
<div ><img src="images/3.png" /></div>
</div>
<div ></div>
</body>
</html>
1、首先要在页面中定义一个滚动容器，比如这里：
<div >
里边是要滚动的元素，滚动元素的水平或垂直排列需要自己来写，但是不要写到容器的样式里边，你可以在容器内部添加元素，设置样式。
2、使用JavaScript初始化滚动，比如这里：
window.onload=function(){
//参数依次为：滚动方向，滚动速度，容器ID，容器宽度，容器高度，滚动内容宽度，滚动内容高度，滚动步长
var scroll =new JScroll("left",30,"content",558,165,1674,165,1);
scroll.Start();
};
滚动速度是每次移动的时间间隔，越小越快，单位是毫秒；
滚动步长是每次移动的距离，单位是像素。
scroll.Start()就是启动滚动的意思了。
这样就可以了，是不是挺简单的。
你可以免费使用这个程序，只需要保留引用js文件顶部的注释。
点击这里下载源代码和例子 。
来源：http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/
- 上一篇 »HTML5学习之CSS3动画
- 下一篇 »css怎么实现平滑滚动效果？