JavaScript的选取框replace<marquee>标签
我对Javascript毫无希望。 这是我的：
<script type="text/javascript"> function beginrefresh(){ //set the id of the target object var marquee = document.getElementById("marquee_text"); if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) { marquee.scrollLeft = 0; } marquee.scrollLeft += 1; // set the delay (ms), bigger delay, slower movement setTimeout("beginrefresh()", 10); } </script> 它滚动到左侧，但我需要它相对无缝地重复。 目前它只是跳回到开始。 这样做可能不可能，如果没有，任何人都有更好的方法？
这里有一个很多function的jQuery插件：
http://jscroller2.markusbordihn.de/example/image-scroller-windiv/
而这一个是“丝绸般光滑”
简单的javascript解决scheme
window.addEventListener('load', function () { function go() { i = i < width ? i + step : 1; m.style.marginLeft = -i + 'px'; } var i = 0, step = 3, space = ' '; var m = document.getElementById('marquee'); var t = m.innerHTML; //text m.innerHTML = t + space; m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789 var width = (m.clientWidth + 1); m.style.position = ''; m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space; m.addEventListener('mouseenter', function () { step = 0; }, true); m.addEventListener('mouseleave', function () { step = 3; }, true); var x = setInterval(go, 50); }, true);
#marquee { background:#eee; overflow:hidden; white-space: nowrap; }
<div id="marquee"> 1 Hello world! 2 Hello world! <a href="#">3 Hello world!</a> </div>
HTML5不支持标签，但很多浏览器仍然会显示“正确”的文字，但是您的代码不会被validation。 如果这不是你的问题，那可能是一个select。
据推测，CSS3具有字幕文本的能力，但是因为任何知道如何做的人都认为这对CSS来说是个“坏主意”，所以我在网上find的信息非常有限。 即使W3文件没有详细介绍爱好者或自学者是如何实施它的。
PHP和Perl也可以复制这个效果。 为此所需的脚本将非常复杂，并占用比其他任何选项更多的资源。 脚本在某些浏览器上运行速度过快也可能导致效果被完全否定。
所以回到JavaScript – 你的代码（OP）似乎是关于我发现的最干净，最简单，最有效的。 我会尝试这个。 对于无缝的事情，我将研究一种方法来限制从结束和开始之间的空白，可能会做一个while循环（或类似的），实际上运行两个脚本，让一个rest，而另一个正在处理。
单个函数的改变也可能会消除空白。 我是JS新手，所以不知道我的头顶。 – 我知道这不是一个全面的答案，但有时候想法可能会导致结果，如果只是为了别人。
我最近使用Cycle 2 Jquery插件在HTML中实现了一个选取框： http : //jquery.malsup.com/cycle2/demo/non-image.php
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1" data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" > <div> Text 1 </div> <div> Text 2 </div> </div>
这个脚本用来replace选取框标记
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.scrollingtext').bind('marquee', function() { var ob = $(this); var tw = ob.width(); var ww = ob.parent().width(); ob.css({ right: -tw }); ob.animate({ right: ww }, 20000, 'linear', function() { ob.trigger('marquee'); }); }).trigger('marquee'); }); </script> <div class="scroll"> <div class="scrollingtext"> Flash message without marquee tag using javascript! </div> </div>
在这里看演示
一个简单的谷歌search，你find你正在寻找什么：
