没有空间的天棚

发布于 2024-09-08 17:00:15 字数 522 浏览 5 评论 0原文

我有一个向上滚动的字幕。

<marquee scrollamount="2" scrolldelay="0" direction="up">
Element One<br/>
Element Two<br/>
...
Element Five Hundred and Thrty-Seven <!-- ;) -->
</marquee>

现在，我想要的是实现这样的目标：当元素结束时，没有空间，直到最后一个元素不再显示，但列表立即从头开始。我还希望选框不要首先向上滚动并让第一个元素逐个出现，而是开始让第一个元素已经滚动到顶部，然后继续滚动。我提到的我需要实现的前一件事比后者重要得多。我不介意解决方案是否涉及不将其设为选框，而是将其设为带有滚动的 div 或类似的内容。只是，请不要发布 JQuery 结果，而是发布纯 JavaScript。

已经有这样一个关于没有间隙的选框的问题，但答案涉及复制文本，然而，虽然删除了第一个间隙，但仍然留下了第二个间隙。

提前致谢！

原文

I have a marquee that is scrolling upwards.

<marquee scrollamount="2" scrolldelay="0" direction="up">
Element One<br/>
Element Two<br/>
...
Element Five Hundred and Thrty-Seven <!-- ;) -->
</marquee>

Now, what I want, is to achieve that, when the elements end, there is no space until the last element is no longer displayed, but the list starts from the beginning immediately. I would also like the marquee not to first scroll upwards and let the first elements appear one by one, but start having the first element already scrolled to the top and then just go on scrolling. The former thing I have mentioned I need to achieve is by far more important than the latter. I don't mind if the solution involves not making it a marquee but some div with scrolling or stuff like that. Only, please do not post JQuery results but pure JavaScript.

There has been such a question about a marquee without a gap asked already, but the answer involved duplicating the text, which however, though removing the first gap, still leaves the second one.

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滿滿的愛 2024-09-15 17:00:15

<!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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

.container-marquee{
position: relative;
width:100%; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Simple Marquee (04-October-2012)
* by Vic Phillips - http://www.vicsjavascripts.org.uk/
***********************************************/

var zxcMarquee={

 init:function(o){
  var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
  p.style.overflow='hidden';
  obj.style.position='absolute';
  obj.style[mde[0]]='0px';
  obj.style[mde[3]]=sz+'px';
  clone=obj.cloneNode(true);
  clone.style[mde[0]]=sz+'px';
  clone.style[mde[2]]='0px';
  obj.appendChild(clone);
  o=this['zxc'+id]={
   obj:obj,
   mde:mde[0],
   sz:sz
  }
  if (typeof(srt)=='number'){
   o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
  }
  else {
   this.scroll(id,0)
  }
 },

 scroll:function(id,ud){
  var oop=this,o=this['zxc'+id],p;
  if (o){
   ud=typeof(ud)=='number'?ud:0;
   clearTimeout(o.dly);
   p=parseInt(o.obj.style[o.mde])+ud;
   if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
    p+=o.sz*(ud>0?-1:1);
   }
   o.obj.style[o.mde]=p+'px';
   o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
  }
 }
}

function init(){

 zxcMarquee.init({
  ID:'marquee1',     // the unique ID name of the parent DIV.                        (string)
  Mode:'Horizontal',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
  StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
  StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)
 });


}

if (window.addEventListener)
 window.addEventListener("load", init, false)
else if (window.attachEvent)
 window.attachEvent("onload", init)
else if (document.getElementById)
 window.onload=init


</script>

</head>

<body>
<div id="marquee1" class="container-marquee" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
Excel in your CA Final exams! Seminars on Robomate CA at Belgaum on 12th Jan., at Mysore on 19th Jan. & Bangalore on 26th Jan. Register now by calling 1800267662!
</div>
</div>

</body>

</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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

.container-marquee{
position: relative;
width:100%; /*marquee width */
height: 200px; /*marquee height */
overflow: hidden;
background-color: white;
padding: 2px;
padding-left: 4px;
}

</style>

<script type="text/javascript">

/***********************************************
* Simple Marquee (04-October-2012)
* by Vic Phillips - http://www.vicsjavascripts.org.uk/
***********************************************/

var zxcMarquee={

 init:function(o){
  var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='H'?['left','offsetWidth','top','width']:['top','offsetHeight','left','height'],id=o.ID,srt=o.StartDelay,ud=o.StartDirection,p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],sz=obj[mde[1]],clone;
  p.style.overflow='hidden';
  obj.style.position='absolute';
  obj.style[mde[0]]='0px';
  obj.style[mde[3]]=sz+'px';
  clone=obj.cloneNode(true);
  clone.style[mde[0]]=sz+'px';
  clone.style[mde[2]]='0px';
  obj.appendChild(clone);
  o=this['zxc'+id]={
   obj:obj,
   mde:mde[0],
   sz:sz
  }
  if (typeof(srt)=='number'){
   o.dly=setTimeout(function(){ zxcMarquee.scroll(id,typeof(ud)=='number'?ud:-1); },srt);
  }
  else {
   this.scroll(id,0)
  }
 },

 scroll:function(id,ud){
  var oop=this,o=this['zxc'+id],p;
  if (o){
   ud=typeof(ud)=='number'?ud:0;
   clearTimeout(o.dly);
   p=parseInt(o.obj.style[o.mde])+ud;
   if ((ud>0&&p>0)||(ud<0&&p<-o.sz)){
    p+=o.sz*(ud>0?-1:1);
   }
   o.obj.style[o.mde]=p+'px';
   o.dly=setTimeout(function(){ oop.scroll(id,ud); },50);
  }
 }
}

function init(){

 zxcMarquee.init({
  ID:'marquee1',     // the unique ID name of the parent DIV.                        (string)
  Mode:'Horizontal',   //(optional) the mode of execution, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
  StartDelay:2000,   //(optional) the auto start delay in milli seconds'.            (number, default = no auto start)
  StartDirection:-1  //(optional) the auto start scroll direction'.                  (number, default = -1)
 });


}

if (window.addEventListener)
 window.addEventListener("load", init, false)
else if (window.attachEvent)
 window.attachEvent("onload", init)
else if (document.getElementById)
 window.onload=init


</script>

</head>

<body>
<div id="marquee1" class="container-marquee" onmouseover="zxcMarquee.scroll('marquee1',0);" onmouseout="zxcMarquee.scroll('marquee1',-1);">
<div style="position: absolute; width: 98%;">
Excel in your CA Final exams! Seminars on Robomate CA at Belgaum on 12th Jan., at Mysore on 19th Jan. & Bangalore on 26th Jan. Register now by calling 1800267662!
</div>
</div>

</body>

</html>

回复收藏 0 原文