1

有没有人想像推特一样制作选框效果？它的蒸汽（不要停止等待循环结束）+在开始和结束时褪色。谢谢。

编辑

好的编辑，我在这里找到了一个半无蒸汽http://jsbin.com/uyawi/3/edit但它仍然滞后 + 可能因为使用 css 而不是真正无流？

4

2 回答 2

5

看看他们的代码。他们放置了两个从 100% 不透明到 100% 透明的 PNG 图像。这两个元素被放置在它们自己<li>的 s 列表末尾的<li>s 和 a<ul>中，然后使用 CSS 定位到浮动在<ul>.

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

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

1.窗帘形象

为此，我暂时借用了 Twitter 的窗帘图像并将其保存到我的 webroot 中/images/left-right-fader.png。他们的推子适用于特定的配色方案，所以我将用我自己的来替换它。做一个好公民，做你自己的，也是。本例中的图像为 120px 宽，左幕在左边缘，右幕在 [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.选框“类”

用法：

var mMarquee = new Marquee(jTarget,strText,intWidth);
  1. jTarget是对您希望滚动条出现的空 div 的 jQuery 引用（例如，如果您希望选取框显示在 中<div id="myMarqueeDiv"></div>，您可以使用$('div#myMarqueeDiv')
  2. strText- 你想要滚动的字符串；
  3. 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('&nbsp;'))
            .append($('<div class="fader left"></div>').html('&nbsp;'));
        intTextWidth = $(jTarget).find('.scrollingtext').width();
        jTarget.width(intWidth);
        jText.text(strText + " " + strText);
        update();
    };
    setup();
    setInterval(update,30);
    return self;
};

4. HTML

在这个具体的例子中，我的身体是这样的：

<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);
});
于 2010-07-04T16:31:45.567 回答
0

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

于 2010-07-04T19:02:01.813 回答