向上无缝滚动的封装（感谢demo,BUG已修复）

2009-03-26 分类：JavaScript 阅读(6474) 评论(0)

实现思路：

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

可以看看这个文章：https://www.html.cn/article.asp?id=571

这里做了一下改进，demo1对象可以根据demo获得，demo2可以复制demo1对象，这里要注意ff下的空白节点问题。可以看看下面这段代码：

JavaScript代码

var?scrollBox?=?document.getElementById(this.boxID); ??
var?appendBox=first(scrollBox).cloneNode(true); ??
scrollBox.appendChild(appendBox);??

?

向上无缝滚动的封装全部代码如下：

看演示地址：https://www.html.cn/demo/Marquee/scroll_text_ok.html

感谢demo的鼎力帮助，如果您对JS也敢兴趣，对我们封装的以下代码有意见建议，或者想和我一起探讨JS技术，那么加入我们，我们的qq群：7617538

该代码有误，请查看下面2008年12月29日更新

XML/HTML代码

<!DOCTYPE?html?PUBLIC?”-//W3C//DTD?XHTML?1.0?Transitional//EN”?”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??? ??
<html?xmlns=“http://www.w3.org/1999/xhtml”>??? ??
<head>??? ??
<meta?http-equiv=“Content-Type”?content=“text/html;?charset=utf-8”?/>??? ??
<title>无标题文档</title>??? ??
<style?type=“text/css”>??? ??
<!–???? ??
ol,ul{list-style:none;?margin:0}???? ??
li{?height:25px}???? ??
—>??? ??
</style>??? ??
</head>??? ??
??? ??
<body>??? ??
<div?id=“demo”?style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
????<ul>??? ??
????????<li>111</li>??? ??
????????<li>222</li>??? ??
????????<li>333</li>??? ??
????????<li>444</li>??? ??
????????<li>555</li>??? ??
????????<li>666</li>??? ??
????????<li>777</li>??? ??
????????<li>888</li>??? ??
????</ul>??
</div>??
<div?id=“demo2”??style=“?overflow:?hidden;?width:?322px;?height:?50px”>??
????<ul>??? ??
????????<li>aaa</li>??? ??
????????<li>bbb</li>??? ??
????????<li>ccc</li>??? ??
????????<li>ddd</li>??? ??
????????<li>eee</li>??? ??
????????<li>fff</li>??? ??
????????<li>ggg</li>??? ??
????????<li>hhh</li>??? ??
????</ul>??
</div>??? ??
<script?type=“text/javascript”>??
?????//—查找相关元素的下一个兄弟元素—//???? ??
????function?next(elem){???? ??
????????do{???? ??
??????????? elem=elem.nextSibling;???? ??
????????}while(elem&&elem.nodeType!=1);???? ??
????????return?elem;???? ??
????}???? ??
????//—查找第一个子元素的函数—//???? ??
????function?first(elem){???? ??
??????? elem=elem.firstChild;???? ??
????????return?elem?&&?elem.nodeType!=1?next(elem):elem;???? ??
????} ??
???? ??
????var?scrollText={ ??
????????init:function(scrollbox,speed){ ??
????????????this.boxID=scrollbox; ??
????????????this.scrollSpeed=speed||10;//初始化的速度10 ??
????????}, ??
????????obj?:?function(){ ??
????????????var?scrollBox?=?document.getElementById(this.boxID); ??
????????????var?appendBox=first(scrollBox).cloneNode(true); ??
????????????scrollBox.appendChild(appendBox); ??
????????????return?{
?????????????????? scrollBox?:?scrollBox,
?????????????????? appendBox?:appendBox,?
?????????????????? scrollSpeed?:scrollText.scrollSpeed
??????????? }; ??
????????}, ??
????????scrollUp?:?function(){ ??
????????????var?m?=?this.obj(); ??
????????????var?doScr?=?setInterval(function(){ ??
????????????????//以下的m[‘scrollBox’]等价于m.scrollBox ??
????????????????if(m[‘appendBox’].offsetHeight<=m[‘scrollBox’].scrollTop){ ??
????????????????????m[‘scrollBox’].scrollTop-=m[‘appendBox’].offsetHeight; ??
????????????????}else{ ??
????????????????????m[‘scrollBox’].scrollTop++; ??
????????????????} ??
????????????},this.scrollSpeed); ??
????????????//当鼠标移入demo时,重新setInterval让方法执行，这样图片会继续移动???? ??
????????????m[‘scrollBox’].onmouseover=function(){???? ??
????????????????clearInterval(doScr);???? ??
????????????}???? ??
??????????//当鼠标移出demo时,重新setInterval让方法执行，这样图片会继续移动???? ??
??
????????????m[‘scrollBox’].onmouseout=function()?{?? ??
????????????????clearInterval(doScr);? ??
????????????????scrollText.init(this.id,?m[‘scrollSpeed’]); ??
????????????????scrollText.scrollUp(); ??
????????????}? ??
????????} ??
????} ??
????scrollText.init(“demo”,10); ??
????scrollText.scrollUp(); ??
????scrollText.init(“demo2”,50); ??
????scrollText.scrollUp(); ??
</script>?????? ??
??? ??
</body>??? ??
</html>??? ??

如果您有什么好的方式，可以和我们一起讨论。我们的qq群：7617538

demo刚刚发来一个改进，如果在init中直接return this，那么就可以链式调用

?

JavaScript代码

var?scrollText={??? ??
??????????? ??
????????init:function(scrollbox,speed){??? ??
????????????this.boxID=scrollbox;??? ??
????????????this.scrollSpeed=speed||10;??? ??
????????????return?this;??//注意这里是新加的? ??
????????},??? ??
……??

那么在调用的时候就可以这样谢了

JavaScript代码

scrollText.init(“demo”).scrollUp();??

等价于原来的

JavaScript代码

scrollText.init(“demo”); ??
scrollText.scrollUp();??

其他左右滚动封装尽请期待。。。

——————————-2008年12月29日更新———————————–

感谢残冰的留言，该问题确实存在，经过demo的努力已经修复

?

JavaScript代码

<!DOCTYPE?html?PUBLIC?“-//W3C//DTD?XHTML?1.0?Transitional//EN”?“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>??? ??
<html?xmlns=“http://www.w3.org/1999/xhtml”>??? ??
<head>??? ??
<meta?http-equiv=“Content-Type”?content=“text/html;?charset=utf-8”?/>??? ??
<title>向上无缝滚动的封装的演示</title>??? ??
<style?type=“text/css”>??? ??
<!–???? ??
ol,ul{list-style:none;?margin:0}???? ??
li{?height:25px}???? ??
–>??? ??
</style>??? ??
</head>??? ??
??? ??
<body>? ??
<div?style=“?height:50px;?line-height:50px;?color:#FFFFFF;?background:#333333;?margin-bottom:20px;?padding-left:30px;?font-size:16px”>?向上无缝滚动的封装的演示-WEB前端开发DOME–<a?style=“color:#FFFFFF”?href=“http://www.9demo.com”>www.9demo.com</a>–<a?style=“color:#FFFFFF”?href=“https://www.html.cn”>www.css88.com</a></div>?? ??
<p>这个是速度为10的滚动</p> ??
<div?id=“demo”?style=“?overflow:?hidden;?width:?322px;?height:?50px”> ??
????<ul>??? ??
????????<li>111</li>??? ??
????????<li>222</li>??? ??
????????<li>333</li>??? ??
????????<li>444</li>??? ??
????????<li>555</li>??? ??
????????<li>666</li>??? ??
????????<li>777</li>??? ??
????????<li>888</li>??? ??
????</ul> ??
</div> ??
<hr?/> ??
<p>这个是速度为50的滚动</p> ??
<div?id=“demo2”??style=“?overflow:?hidden;?width:?322px;?height:?50px”> ??
????<ul>??? ??
????????<li>aaa</li>??? ??
????????<li>bbb</li>??? ??
????????<li>ccc</li>??? ??
????????<li>ddd</li>??? ??
????????<li>eee</li>??? ??
????????<li>fff</li>??? ??
????????<li>ggg</li>??? ??
????????<li>hhh</li>??? ??
????</ul> ??
</div>??? ??
<script?type=“text/javascript”> ??
function?next(elem){???? ??
????????do{???? ??
????????????elem=elem.nextSibling;???? ??
????????}while(elem&&elem.nodeType!=1);???? ??
????????return?elem;???? ??
????}???? ??
????//—查找第一个子元素的函数—//???? ??
????function?first(elem){???? ??
????????elem=elem.firstChild;???? ??
????????return?elem?&&?elem.nodeType!=1?next(elem):elem;???? ??
????} ??
???? ??
????var?scrollText?=?{ ??
????????init?:?function(id,?speed){ ??
????????????this.speed?=?speed?||?10; ??
????????????this.boxID?=?id; ??
????????????this.scrollBox?=?document.getElementById(id); ??
????????????this.appendBox?=?first(this.scrollBox).cloneNode(true); ??
????????????this.scrollBox.appendChild(this.appendBox); ??
????????????this.objs?=?{ ??
????????????????scrollBox?:?this.scrollBox, ??
????????????????appendBox?:?this.appendBox, ??
????????????????speed?:?this.speed, ??
????????????????id?:?this.boxID ??
????????????}; ??
????????????return?this; ??
????????}, ??
??
????????scrollUp?:?function(){ ??
????????????var?self?=?this.objs; ??
????????????self.begin?=?function(){ ??
????????????????self.doScr?=?setInterval(function(){ ??
????????????????????if(self[‘appendBox’].offsetHeight<=self[‘scrollBox’].scrollTop){ ??
????????????????????????self[‘scrollBox’].scrollTop-=first(self[‘scrollBox’]).offsetHeight; ??
????????????????????}else{ ??
????????????????????????self[‘scrollBox’].scrollTop++; ??
????????????????????} ??
????????????????},self.speed);?? ??
????????????} ??
????????????self.begin(); ??
????????????self.scrollBox.onmouseover?=?function(){ ??
????????????????clearInterval(self.doScr); ??
????????????} ??
??
????????????self.scrollBox.onmouseout?=?function(){ ??
????????????????self.begin(); ??
????????????} ??
????????} ??
??
????} ??
???? ??
????scrollText.init(‘demo’).scrollUp(); ??
????scrollText.init(‘demo2’,?50).scrollUp(); ??
???? ??
</script>?? ??
???? ??
? ??
</body>??? ??
</html>???

赞(0) 打赏

未经允许不得转载：WEB前端开发 » 向上无缝滚动的封装（感谢demo,BUG已修复）

相关推荐

评论抢沙发

前端开发相关广告投放更专业更精准