代码改变世界

分享一个可以灵活控制的实现Javascript滚动效果的程序

  萤火架构  阅读(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/

编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示