原生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 相关文章推荐
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
我的论坛源代码(十)
2006/10/09 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jquery.validate使用详解
2016/06/02 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
loading动画特效小结
2017/01/22 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
Vue中props的使用详解
2018/06/15 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
python读取注册表中值的方法
2013/04/08 Python
python连接数据库的方法
2017/10/19 Python
python 实现UTC时间加减的方法
2018/12/31 Python
python实现控制台打印的方法
2019/01/12 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
食品安全责任书
2014/04/15 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书