原生原生javascript实现无间缝滚动示例实现无间缝滚动示例
原生javascript无间缝滚动目前支持的是竖向与横向滚动，下面有个不错的示例，大家可以参考下
目前支持的是竖向与横向滚动
http://lgyweb.com/marScroll/
现在分析下无间缝实现的基本思路（竖向例子）：
HTML结构：
复制代码 代码如下:
<div id="marScroll">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
</ul>
</div>
CSS：
复制代码 代码如下:
<style type="text/css">
ul,li{padding: 0;margin: 0;}
#marScroll{height: 60px;overflow: hidden;}
#marScroll li{height: 20px;line-height: 20px;font-size: 14px;}
</style>
（1）首先需要判断里面的内容高度ul结构是否高于外层div#marScrolll，则才进行无间缝滚动：
复制代码 代码如下:
// 写在匿名函数里面，防止全局变量污染
(function(){
var target = document.getElementById('marScroll'),
oUl = target.getElementsByTagName('ul')[0];
// 内容少，则直接退出此函数
if(oUl.offsetHeight<target.offsetHeight) return;
})();
（2）无间缝就是内容的无限滚动展示，那么先需要复制里面的内容，然后通过外层的scrollTop++属性，用setInterval 函数进
行循环执行
复制代码 代码如下:
target.innerHTML += target.innerHTML;
/* 判断每次滚动的距离等于第一个ul的高度时，设置scrollTop为0，然后如此的循环操作就是无间滚动了
---------------------------------------------------------------------------------------------*/
// 把功能函数抽离出来，方便调用
var fn = function(){
if(target.scrollTop == oUl_h){
target.scrollTop = 0;
}else{
target.scrollTop++;
}
}
// setInterval 循环
var timer = setInterval(function(){
fn();
},30);
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38738830
- 粉丝: 6
- 资源: 920
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
