带有渐变效果的字幕水平文本滚动？答案

【问题标题】：Marquee horizontal text scroll with a fading effect?带有渐变效果的字幕水平文本滚动？
【发布时间】：2013-12-18 10:16:58
【问题描述】：

我正在寻找一种解决方案，用于使用 javascript（如果可能，使用 jquery）实现单行 Marquee 水平文本滚动并具有淡化效果。就像一个轮播文本滚动。所有的谷歌搜索都给了我滚动效果，但没有褪色效果。

我知道这可以在 Flash 中完成，但如果有其他解决方案，我会避免使用它。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript scroll marquee

【解决方案1】：

<html>
<head>
<style>
    #marquee{
        position: absolute;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        function marqueePlay(){
            $("#marquee").animate(
                {
                left: $(window).width() - $("#marquee").width(),
                opacity: 0
                }, 10000, function(){
                    $("#marquee").css("left", 0);
                    $("#marquee").css("opacity", 1);
                    marqueePlay();
                }
            );
        }
        marqueePlay();
    }); 
</script>  
</head>
<body>
<div id="marquee">Weee...Weee...Duh!</div>
</body>
</html>

【讨论】：

【解决方案2】：

您可以这样做的一种方法是创建一个选取框并在其边缘浮动一个半透明图像：

你找到的任何一个都可以，或者使用 jQuery 内置的这个：http://remysharp.com/demo/marquee.html

这是一个褪色的图像：http://www.collylogic.com/scripts/fade.png

这是上图中的the source where you can see actually SEE the fading effect

这样做的好处是您无需在 javascript 中进行任何昂贵的处理。您还可以选择更多种类的滚动，而不必担心何时何地消失。

缺点是半透明的 png 需要 hack 才能在 IE6 中工作。但既然只是养眼，我想那少数 IE6 用户不会受到太大影响。

【讨论】：