分享一个可以灵活控制的实现Javascript滚动效果的程序
2011-06-27 09:14 萤火架构 阅读(528) 评论(0) 编辑 收藏 举报前段时间写过几篇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文件顶部的注释。
点击这里下载源代码和例子 。
来源:http://blog.bossma.cn/javascript/javascript-flexible-scroll-words-or-images/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战