原生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简化JavaScript开发分析
Feb 19 Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
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生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
详解js中==与===的区别
2017/01/08 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python自带的IDE在哪里
2020/07/01 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
如何使用Pytorch搭建模型
2020/10/26 Python
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
自荐信模版
2013/10/24 职场文书
矿泉水广告词
2014/03/20 职场文书
个人工作主要事迹
2014/05/08 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
同意离婚答辩状
2015/05/22 职场文书
公司酒会主持词
2015/07/02 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技