没有空格的选框答案

【问题标题】：Marquee without Space没有空格的选框
【发布时间】：2010-07-07 19:09:13
【问题描述】：

我有一个向上滚动的选取框。

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

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

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

提前致谢！

【问题讨论】：

<marquee>，神秘的没有 jQuery 评论...老式的，有点，是吗？
^^ 我实际上并不想使用 marquee 标签。

标签： javascript html marquee

【解决方案1】：

<!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>

【讨论】：

【解决方案2】：

不要试图粗鲁，我可以建议你可能不应该使用选取框标签吗？

请参阅此wikipedia page 了解可用性问题的细分。

更好的方法是使用 javascript 逐步增强页面。这是example in jQuery。

【讨论】：

好吧，正如我所说，我实际上并不想使用它。我所需要的只是消除这个选框示例没有提供的差距。
这不能回答问题。