当前位置：文江博客话题详情

像推特一样的字幕褪色+无蒸汽？

发布于 2024-09-07 19:20:20 字数 244 浏览 6 评论 0原文

有人有想法制作像 Twitter 一样的字幕效果吗？它无蒸汽（不会停止等待循环结束）+在开始和结束时逐渐消失。谢谢。

编辑

好的编辑，我在这里找到了一个半无蒸汽的http://jsbin。 com/uyawi/3/edit 但它仍然很慢+不是真正的无流，也许是因为使用了 css？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

末蓝 2024-09-14 19:20:20

看看他们的代码。他们放置了两张从 100% 不透明渐变到 100% 透明的 PNG 图像。这两个元素放置在

列表末尾的它们自己的 
内以及 < /code>，然后使用 CSS 定位以浮动在 
 的两侧。

我强烈建议使用 Firefox+Firebug 或 Safari/Chrome 以及开发人员工具栏。所有这些工具都有一个名为“检查元素”的功能，它允许您非常快速地深入到文档中的特定元素并读取其 CSS。

[编辑]
我需要在下周左右构建一个滚动器，所以我今天写了一些东西。我的代码将集成到 Adobe Air 中，因此我不会进行任何跨浏览器检查。这里的 CSS 可能需要调整。我首先尝试使用 Remy Sharp 的丝滑选框，但是添加该代码会破坏并重新创建大部分 HTML，从而使透明翅膀难以集成。构建滚动器的代码并不难，所以我只是编写了自己的代码。下面的代码分为五个部分：

1. 窗帘图像

为了实现这一点，我暂时借用了 Twitter 的窗帘图像并将其保存到我的 webroot 中：/images/left-right-fader.png。他们的推子适用于特定的配色方案，所以我将用我自己的推子替换它。做一个好公民，也让自己成为一个好公民。本例中的图像宽度为 120 像素，左幕位于左边缘，右幕位于 [60,0] 点。换句话说，它是一个 120 像素宽的图像，从左边缘的 100% 不透明度渐变到中间的 0% 不透明度，再到右边缘的 100% 不透明度。如果更改图像尺寸，则还需要更改 CSS。高度并不重要，因为它是平铺的。

额外要点：如果您的目标是 Webkit 或 Firefox 浏览器，您应该能够消除图像并使用带有渐变背景的常规 HTML 元素（div/span）。

2. CSS

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;
}

3. Marquee 'class'

用法：

var mMarquee = new Marquee(jTarget,strText,intWidth);

jTarget 是对您希望滚动条出现的空 div 的 jQuery 引用（例如，如果您希望 Marquee 显示在 >
，您可以使用 $('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;
};

4. HTML

在这个特定示例中，我的正文如下所示： this:

<body>
    <div id="marquee"></div>
</body>

5. 实现代码

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);
});

Take a look at their code. They have placed two PNG images that fade from 100% opaque to 100% transparent. The two elements are placed inside their own <li>s at the end of a list of <li>s and inside a <ul>, and then positioned using CSS to float at either side of the <ul>.

I'd highly recommend using Firefox+Firebug or Safari/Chrome and the developer's toolbar. All these tools have a feature called "Inspect Element" which allow you to very quickly drill down to a specific element in the document and read its CSS.

[EDIT]
I need to build a scroller in the next week or so, so I wrote something up today. My code is going to be integrated into Adobe Air, so I'm not doing any cross-browser checks. The CSS here likely will need to be tweaked. I first tried playing with Remy Sharp's Silky Smooth Marquee, but adding that code destroys and recreates most of the HTML making the transparent wings difficult to integrate. The code to build a scroller is not that hard, so I just rolled my own. The code below is in five parts:

1. The curtain image

For this to work, I temporarily borrowed Twitter's curtain image and saved it to my webroot at /images/left-right-fader.png. Their fader is for a specific color scheme, so I'll be replacing it with my own. Be a good citizen and make your own, too. The image in this case is 120px wide with the left curtain at the left edge and the right curtain at the [60,0] point. In other words, it is a single 120px-wide image that fades from 100% opacity at the left edge to 0% opacity in the middle to 100% opacity at the right edge. If you change the image dimensions, you will need also to change the CSS. The height does not matter because it tiles.

Extra-points: if you are targeting a Webkit or Firefox browser, you should be able to eliminate the image and use a regular HTML element (div/span) with a gradient background.

2. The CSS

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;
}

3. The Marquee 'class'

Usage:

var mMarquee = new Marquee(jTarget,strText,intWidth);

jTarget is a jQuery reference to an empty div where you want the scroller to appear (eg. if you want the marquee to show up in <div id="myMarqueeDiv"></div>, you would use $('div#myMarqueeDiv')
strText - the string you want to have scroll;
intWidth - how wide you want the scroller to be.

Right now, it returns a Marquee object with no public methods. It's simple enough to add some public methods (for example, as stop() method or restart() method).

Here is the code:

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;
};

4. The HTML

In this specific example, my body looks like this:

<body>
    <div id="marquee"></div>
</body>

5. Implementation code

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);
});

回复收藏 0 原文

百善笑为先 2024-09-14 19:20:20

有一些可用于选取框的新属性 - onscrollstart 和 onscrollend （我认为） - 您可以使用这些属性来调整内容的不透明度。或者你可以在选取框周围放置一个跨度 - 使其位置：相对，然后在跨度中放置 2 个相对的淡入淡出 png（位置：绝对；左：0 另一个右：0），这将很快工作......

回复收藏 0 原文

~没有更多了~

关于作者

安静

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

像推特一样的字幕褪色+无蒸汽？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

1. 窗帘图像

2. CSS

3. Marquee 'class'

4. HTML

5. 实现代码

1. The curtain image

2. The CSS

3. The Marquee 'class'

4. The HTML

5. Implementation code

关于作者

相关话题

热门标签

推荐作者

離殇

小姐丶请自重

Aik

国产ˉ祖宗

猥琐帝

半仙

友情链接

像推特一样的字幕褪色+无蒸汽？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

1. 窗帘图像

2. CSS

3. Marquee 'class'

4. HTML

5. 实现代码

1. The curtain image

2. The CSS

3. The Marquee 'class'

4. The HTML

5. Implementation code

关于作者

相关话题

热门标签

推荐作者

離殇

小姐丶请自重

Aik

国产ˉ祖宗

猥琐帝

半仙

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。