javascript 如何自动滚动包含纯文本的 div（水平）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5757509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you automatically scroll a div (Horizontally) which contains plain text?
提问by Penumbra
Please bear with me here! I familiarized myself with basic HTML and decided web programming would be my occupation. I enrolled in a program and am now writing my first live project in my fourth semester. Our classes deal mainly in the .NET Framework and I am very unfamiliar with Javascript and client-side programming in general.
请多多包涵！我熟悉了基本的 HTML，并决定 Web 编程将成为我的职业。我注册了一个程序，现在正在编写我第四学期的第一个现场项目。我们的课程主要处理 .NET Framework，而我对 Javascript 和客户端编程一般都非常陌生。
Hopefully I outline this information enough to give the great members of this community a chance to help a budding developer.
希望我概述的这些信息足以让这个社区的伟大成员有机会帮助一个崭露头角的开发人员。
Objective: Scroll a div containing plain text horizontally across a page indefinitely Environment: Windows server running ASP.NET 4.0. Language: C#/XHTML/Javascript Tools Used: jQuery, jQueryTools, SmoothDivScroll
目标：无限期地在页面上水平滚动包含纯文本的 div 环境：运行 ASP.NET 4.0 的 Windows 服务器。语言：C#/XHTML/Javascript 使用的工具：jQuery、jQueryTools、SmoothDivScroll
I have attempted to use a jQuery plugin known as SmoothDivScroll as well as jQueryTools to execute my objective, however, with my lack of client-side experience, I have had absolutely no success.
我曾尝试使用名为 SmoothDivScroll 的 jQuery 插件以及 jQueryTools 来执行我的目标，但是，由于我缺乏客户端经验，我绝对没有成功。
My webpage is available at http://paysonfirstassembly.com/and the div that I am attempting to scroll has a class and ID of scrollingPanel.
我的网页在http://paysonfirstassembly.com/上可用，我试图滚动的 div 有一个类和 scrollingPanel 的 ID。
I can provide sample code if it will help.
如果有帮助，我可以提供示例代码。
-Taylor
-泰勒
回答by Manuel Bitto
This seems to fit your needs: http://plugins.jquery.com/project/jqScroller
这似乎符合您的需求：http: //plugins.jquery.com/project/jqScroller
<style type="text/css">
/* CSS for the scrollers */
#scrollingPanel{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
.scrollingtext{
position:absolute;
white-space:nowrap;
}
</style>
$(document).ready(function() {
//create a horizontal scroller
$('#scrollingPanel').SetScroller({
velocity: 80,
direction: 'horizontal'
//more tweaks on the source code of plugin page
});
});
your HTML should be like this:
你的 HTML 应该是这样的：
<div id="scrollingPanel">
<div class="scrollingtext">
Making a Difference in People
</div>
</div>
See this pagesource code for more functions and tweaks
有关更多功能和调整，请参阅此页面源代码
回答by Ian G
Remy Sharp has a good jQuery Marquee implementation herewith some demos. This allows you to do
Remy Sharp 有一个很好的 jQuery Marquee 实现，这里有一些演示。这允许你做
<div class='marquee'>Scroll this</div>
and then
接着
$('.marquee').marquee();
with his plug-in included.
包括他的插件。
回答by Ketan Modi
Wrap your text in marquee tag like this
像这样将文本包裹在选框标签中
<div class="scrollingPanel">
<marquee>Making a Difference in People</marquee>
</div>
Though, I personally DO NOT RECOMMEND this solution. But it will work for your college project like charm. It doesn't need any external scripts.
不过，我个人不推荐此解决方案。但它会像魅力一样适用于你的大学项目。它不需要任何外部脚本。
