任何人都想制作一个类似于 twitter 的字幕效果吗？ 它的蒸汽（不要停止等待循环结束）+在开始和结束时褪色。谢谢。
编辑
好的编辑，我在这里找到了一个半无流http://jsbin.com/uyawi/3/edit，但它仍然滞后 + 不是真的无流可能是因为使用了 css？
【问题讨论】：
标签： javascript jquery html ajax marquee
看看他们的代码。他们放置了两个从 100% 不透明到 100% 透明的 PNG 图像。这两个元素分别放在<li>s 列表末尾的<li>s 和<ul> 内，然后使用CSS 定位在<ul> 的任一侧浮动。
我强烈推荐使用 Firefox+Firebug 或 Safari/Chrome 以及开发人员的工具栏。所有这些工具都有一个名为“检查元素”的功能，它允许您非常快速地深入到文档中的特定元素并阅读其 CSS。
[编辑] 我需要在下一周左右制作一个滚动条，所以我今天写了一些东西。我的代码将被集成到 Adobe Air 中，因此我不会进行任何跨浏览器检查。这里的 CSS 可能需要调整。我首先尝试使用Remy Sharp's Silky Smooth Marquee，但添加该代码会破坏并重新创建大部分 HTML，从而使透明机翼难以集成。构建滚动条的代码并不难，所以我自己滚动。下面的代码分为五部分：
为此，我暂时借用了 Twitter 的窗帘图片并将其保存到我的 webroot /images/left-right-fader.png。他们的推子适用于特定的配色方案，所以我将用我自己的来替换它。做一个好公民，做你自己的，也是。本例中的图像为 120px 宽，左幕在左边缘，右幕在 [60,0] 点。换句话说，它是一个 120 像素宽的图像，从左边缘的 100% 不透明度逐渐变为中间的 0% 不透明度，再到右边缘的 100% 不透明度。如果更改图像尺寸，则还需要更改 CSS。高度无关紧要，因为它是瓷砖。
额外点：如果您的目标是 Webkit 或 Firefox 浏览器，您应该能够消除图像并使用带有渐变背景的常规 HTML 元素 (div/span)。
body,div {border:none;padding:0;margin:0;}
div#marquee {
position:relative;
overflow:hidden;
background-color:#000;
color:#ddd;
}
div#marquee div.scrollingtext {
position:relative;
display:inline;
white-space:nowrap;
}
div#marquee div.fader {
width:60px;
position:absolute;
background:url(/images/left-right-fader.png) repeat-y scroll 0 0 transparent;
top:0;
left:0;
}
div#marquee div.fader.left {
background-position:-60px 0;
left:auto;
right:0;
}
用法：
var mMarquee = new Marquee(jTarget,strText,intWidth);
jTarget 是一个 jQuery 引用，指向您希望滚动条出现的空 div（例如，如果您希望选框出现在 <div id="myMarqueeDiv"></div> 中，您可以使用 $('div#myMarqueeDiv')
strText - 你想要滚动的字符串； intWidth - 您希望滚动条的宽度。现在，它返回一个没有公共方法的Marquee 对象。添加一些公共方法很简单（例如，stop() 方法或restart() 方法）。
代码如下：
var Marquee = function(j,s,w) {
var self = this;
var jTarget = j;
var strText = s;
var intWidth = w;
var intPaddingLeft = 60;
var jText,intTextWidth;
var update = function() {
intPaddingLeft -= 2;
if (intPaddingLeft < -intTextWidth) {
intPaddingLeft += intTextWidth;
}
jText.css({'left':intPaddingLeft + 'px'});
};
var setup = function() {
jText = $('<div class="scrollingtext"></div>').text(strText);
jTarget
.append(jText)
.append($('<div class="fader"></div>').html(' '))
.append($('<div class="fader left"></div>').html(' '));
intTextWidth = $(jTarget).find('.scrollingtext').width();
jTarget.width(intWidth);
jText.text(strText + " " + strText);
update();
};
setup();
setInterval(update,30);
return self;
};
在这个具体的例子中，我的身体是这样的：
<body>
<div id="marquee"></div>
</body>
strLoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...";
jQuery(function($) {
myMarquee = new Marquee($('div#marquee'),strLoremIpsum,500);
});
【讨论】：
有一些可用于选取框的新属性 - onscrollstart 和 onscrollend（我认为） - 您可以使用它们来处理内容的不透明度。或者你可以在选框周围放置一个跨度 - 使其位置：相对然后在跨度中放置 2 个相对的褪色 png（位置：绝对；左：0 另一个右：0），这将真正快速工作....
【讨论】：