关于实现滚动效果现在提供一个新的类库，功能更多，浏览器兼容性更强，点此移步过去看看。
前段时间写过几篇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文件顶部的注释。
点击这里下载源代码和例子 。
目前有16 条评论
发表评论
相关文章
国内AI资源汇总，AI聊天、AI绘画、AI写作、AI视频、AI设计、AI编程、AI音乐等，国内顺畅访问，无需科学上网。
扫码或点击进入：萤火AI大全
文章分类
最新评论