javascript中图片无缝滚动代码

时间：2012-11-30 编辑：简简单单来源：一聚教程网

下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和 demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

核心代码

代码如下	复制代码

上面显示的是四行，如果只要1行，或者几行改这里
只显示1行：

图片滚动

代码如下	复制代码

再看个实例

代码如下	复制代码
程序代码向右滚动

一个中级的上、下、左、右滚动代码，Js无缝滚动代码，可以控制滚动速度、滚动方向，而且考虑到了obj.style.attr只能获取到行内样式，因而还增加了JS判断获取确切的外补丁，以消除非行内样式的外补丁对无缝衔接的影响。JS通过四次循环内部元素的方式来保持滚动，所以只要原始内容尺寸超过容器对应尺寸的1/4就能滚动，降低了之前两次循环元素时的滚动门槛。
　　第一个参数 con_id 是用于JS找到元素的，是滚动元素的id。
　　第二个参数 speed_num 是用来设置滚动速度的，数值越大，滚动速度越慢；单位默认是毫秒，不用写，只要写个正整数即可。
　　第三个参数 direct 是用来控制滚动方向的，top/bottom/left/right,如果不是这四个值，则水平滚动默认向左，竖直滚动默认向上。注意几点：
　　1、水平滚动的容器id给出的容器能且仅能有一个直接子节点！
　　2、使用方式是在页面头部引入此文件，在需要滚动的容器的闭合标签后调用对应的滚动方法scrollSP(con_id,speed,direct)、scrollSZ(con_id,speed,direct)。

代码如下

复制代码

滚动代码

上一个： javascript select新增、修改、删除、选中、清空、判断存在函数
下一个： javascript控制滚动条与获取控件的位置

推荐专题

最新下载

热门教程

javascript中图片无缝滚动代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程