Question

我正在寻找单行Marquee水平文本滚动的解决方案，使用javascript（如果可能的话，jquery）具有淡化效果。像旋转木马文字滚动。所有谷歌搜索都给我滚动效果，但没有褪色效果。

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

非常感谢任何帮助。

Answer 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>

Answer 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需要在IE6中工作。但是，因为它只是眼睛糖果，我想象那些IE6用户不会受到那么多影响。

选框水平文字滚动具有淡化效果？

2 个答案: