原生javascript实现无间缝滚动示例


Posted in Javascript onJanuary 28, 2014

目前支持的是竖向与横向滚动

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)鼠标经过此内容块时,就停止滚动
// hover 
target.onmouseover = function(){ 
clearTimeout(timer); 
} 
target.onmouseout = function(){ 
timer = setInterval(function(){ 
fn(); 
},30); 
}

例子JS总代码:
// 写在匿名函数里面,防止全局变量污染 
(function(){ 
var target = document.getElementById('marScroll'), 
oUl = target.getElementsByTagName('ul')[0], 
oUl_h = oUl.offsetHeight; 
// 内容少,则直接退出此函数 
if(oUl_h<target.offsetHeight) return; 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); 
// hover 
target.onmouseover = function(){ 
clearTimeout(timer); 
} 
target.onmouseout = function(){ 
timer = setInterval(function(){ 
fn(); 
},30); 
} 
})();

已经完成了个简单的竖向无间缝,为了满足更多的需求,建议封装成可以,竖向,横向,多次调用的函数。

以下是个人的封装,线上例子:

http://lgyweb.com/marScroll/

function GyMarquee(opt){ 
this.opt = opt; 
if(!document.getElementById(this.opt.targetID)) return; 
this.target = document.getElementById(this.opt.targetID); 
this.dir = this.opt.dir == 'crosswise'?'crosswise':'vertical'; 
this.effect = this.opt.effect == 'scroll'?'scroll':'marque'; 
this.scrollHeight = this.opt.scrollHeight; 
this.init(); 
} 
GyMarquee.prototype = { 
marquee:function(){ 
var _that = this, 
direction = 'scrollTop', 
judge = this.target.scrollHeight, 
timer = null; 
if(this.dir == 'crosswise'){ 
direction = 'scrollLeft'; 
judge = this.itemLen*this.opt.itemWidth; 
this.targetChild.style.width = this.itemLen*this.opt.itemWidth*2 + 'px'; 
} 
var doFn = function(){ 
if(_that.target[direction] == judge){ 
_that.target[direction] = 0; 
} 
_that.target[direction]++; 
} 
timer = setInterval(function(){ 
doFn(); 
},38); 
this.target.onmouseover = function(){ 
if(timer) clearTimeout(timer); 
} 
this.target.onmouseout = function(){ 
timer = setInterval(function(){ 
doFn(); 
},38); 
} 
}, 
scrollDo:function(){ 
var can = true, 
_that = this; 
this.target.onmouseover=function(){can=false}; 
this.target.onmouseout=function(){can=true}; 
new function (){ 
var stop=_that.target.scrollTop%_that.scrollHeight==0&&!can; 
if(!stop)_that.target.scrollTop==parseInt(_that.target.scrollHeight/2)?_that.target.scrollTop=0:_that.target.scrollTop++; 
setTimeout(arguments.callee,_that.target.scrollTop%_that.scrollHeight?20:2500); 
}; 
}, 
getByClassName:function(className,parent){ 
var elem = [], 
node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'), 
p = new RegExp("(^|\\s)"+className+"(\\s|$)"); 
for(var n=0,i=node.length;n<i;n++){ 
if(p.test(node[n].className)){ 
elem.push(node[n]); 
} 
} 
return elem; 
}, 
init:function(){ 
var val = 0; 
if(this.dir =='crosswise'&&this.effect=='marque'&&this.opt.itemName!=''){ 
this.itemLen = this.target.getElementsByTagName(this.opt.itemName).length; 
val = this.itemLen*this.opt.itemWidth; 
}else{ 
val = this.target.scrollHeight; 
} 
var holderHTML = this.target.innerHTML; 
this.target.innerHTML = '<div class="J_scrollInner">'+holderHTML+'</div>'; 
this.targetChild = this.getByClassName('J_scrollInner',this.target)[0]; 
var attr = this.dir == 'vertical'?'offsetHeight':'offsetWidth'; 
if(val>this.target[attr]){ 
if(this.effect == 'scroll'){ 
this.scrollDo(); 
}else{ 
this.marquee(); 
} 
this.targetChild.innerHTML += this.targetChild.innerHTML; 
} 
} 
}
Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
js获取php变量的实现代码
Aug 10 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
javascript常用对话框小集
Sep 13 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
JavaScript Split()方法
Dec 18 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 #Javascript
纯css+js写的一个简单的tab标签页带样式
Jan 28 #Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 #Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 #Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 #Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 #Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
Node.js事件驱动
2015/06/18 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
python进程间通信Queue工作过程详解
2019/11/01 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
tensorflow 模型权重导出实例
2020/01/24 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
Python实现自动整理文件的脚本
2020/12/17 Python
syb养殖创业计划书
2014/01/09 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
《口技》教学反思
2014/02/21 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
关于保护环境的建议书
2014/08/26 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
请病假条范文
2015/08/17 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL