Question

任何人都有想法像twitter一样制作选框效果吗？它的无缝（doenst停止等待循环结束）+在开始和结束时淡出。感谢。

修改的

好的编辑，香港专业教育学院在这里发现了一个半无形http://jsbin.com/uyawi/3/edit但它仍然滞后+不是真正的无缝可能是因为使用了CSS？

Answer 1

看看他们的代码。他们放置了两个PNG图像，从100％不透明到100％透明淡入淡出。这两个元素放在<li>列表末尾的<li>内部<ul>内，然后使用CSS放置在<ul>的任意一侧。 1}}。

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

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

1。窗帘图像

为了实现这一点，我暂时借用Twitter的窗帘图像并将其保存到/images/left-right-fader.png的我的webroot。他们的推子是一个特定的配色方案，所以我将用我自己的替换它。做一个好公民，也做自己的。在这种情况下，图像是120px宽，左边的左窗帘和[60,0]点的右窗帘。换句话说，它是一个120px宽的单个图像，从左边缘的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引用，您希望滚动条出现（例如，如果您希望在<div id="myMarqueeDiv"></div>中显示选框，则可以使用$('div#myMarqueeDiv') < / LI>
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('&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);
});

Answer 2

有一些新的属性可用于marquees - onscrollstart和onscrollend（我认为） - 您可以使用它们来破坏内容的不透明度。或者你可以在选框周围放置一个跨度 - 使其位置：相对然后在跨度中放置2个相反的淡化png（位置：绝对;左：0，另一个右：0），它将真正快速地工作....

叽叽喳喳的大帐篷淡化+无尽的？

2 个答案:

1。窗帘图像

2。 CSS

3。 Marquee'class'

4。 HTML

5。实施代码