Javascript 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>
它向左滚动,但我需要它相对无缝地重复。 目前它只是跳回到开头。 我的方法可能不行,如果不行的话谁有更好的方法?
I'm hopeless at Javascript. This is what I have:
<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>
It scrolls to the left but I need it to repeat relatively seamlessly. At the moment it just jumps back to the beginning. It might not be possible the way I've done it, if not, anyone have a better method?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
这是一个具有很多功能的 jQuery 插件:
http://jscroller2.markusbordihn.de /example/image-scroller-windiv/
这个是“丝般光滑”
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
Here is a jQuery plugin with a lot of features:
http://jscroller2.markusbordihn.de/example/image-scroller-windiv/
And this one is "silky smooth"
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/
简单的 JavaScript 解决方案:
JSFiddle
Simple javascript solution:
JSFiddle
我最近使用 Cycle 2 Jquery 插件在 HTML 中实现了一个选框:
http://jquery.malsup.com/cycle2/demo/non-image.php
I recently implemented a marquee in HTML using Cycle 2 Jquery plugin :
http://jquery.malsup.com/cycle2/demo/non-image.php
HTML5 不支持该标记,但是许多浏览器仍会“正确”显示文本,但您的代码将无法验证。 如果这对您来说不是问题,那么这可能是一个选择。
据推测,CSS3 具有字幕文本的能力,但是因为任何知道如何做到这一点的人都认为这对于 CSS 来说是一个“坏主意”,所以我在网上找到的信息非常有限。 即使是 W3 文档也没有提供足够的细节供业余爱好者或自学人员实施。
PHP 和 Perl 也可以复制这种效果。 为此所需的脚本将非常复杂,并且比任何其他选项占用更多的资源。 还有一种可能是脚本在某些浏览器上运行得太快,导致效果完全无效。
回到 JavaScript - 你的代码 (OP) 似乎是我发现的最干净、最简单、最有效的代码。 我会尝试这个。 对于无缝的事情,我将寻找一种方法来限制结束和开始之间的空白,可能通过执行 while 循环(或类似的)并实际运行两个脚本,让一个在另一个正在处理时休息。
也可能有一种通过改变单个函数来消除空白的方法。 我是 JS 新手,所以不知道。 - 我知道这不是一个完整的答案,但有时想法可以带来结果,即使只是为了别人。
HTML5 does not support the tag, however a lot of browsers will still display the text "properly" but your code will not validate. If this isn't an issue for you, that may be an option.
CSS3 has the ability, supposedly, to have marquee text, however because anyone that knows how to do it believes it's a "bad idea" for CSS, there is very limited information that I have found online. Even the W3 documents do not go into enough detail for the hobbyist or self-teaching person to implement it.
PHP and Perl can duplicate the effect as well. The script needed for this would be insanely complicated and take up much more resources than any other options. There is also the possibility that the script would run too quickly on some browsers, causing the effect to be completely negated.
So back to JavaScript - Your code (OP) seems to be about the cleanest, simplest, most effective I've found. I will be trying this. For the seamless thing, I will be looking into a way to limit the white space between end and beginning, possibly with doing a while loop (or similar) and actually run two of the script, letting one rest while the other is processing.
There may also be a way with a single function change to eliminate the white space. I'm new to JS, so don't know off the top of my head. - I know this isn't a full-on answer, but sometimes ideas can cause results, if only for someone else.
该脚本用于替换选取框标签
This script used to replace the marquee tag
使用 @Stano 代码和一些 jQuery,我创建了一个脚本,它将用标准
div
替换旧的marquee
标签。 该代码还将解析marquee
属性,例如direction
、scrolldelay
和scrollmount
。这是代码:
这是一个有效的 codepen
Working with @Stano code and some jQuery I have created a script that will replace the old
marquee
tag with standarddiv
. The code will also parse themarquee
attributes likedirection
,scrolldelay
andscrollamount
.Here is the code:
And here is a working codepen
我最近在一个需要字幕的网站上工作,最初使用了 动态字幕 ,效果很好,但我无法让文本从屏幕上开始。 环顾四周,但找不到任何像我想要的那么简单的东西,所以我自己做了:
还有CSS:
I was recently working on a site that needed a marquee and had initially used the dynamic marquee, which worked well but I couldn't have the text begin off the screen. Took a look around but couldn't find anything quite as simple as I wanted so I made my own:
And the CSS: