文章/答案/技术大牛

发布

社区首页 >问答首页 >具有淡入淡出效果的字幕水平文本滚动？

问具有淡入淡出效果的字幕水平文本滚动？
EN

Stack Overflow用户

提问于 2010-05-06 23:14:16

回答 2查看 20.4K关注 0票数 2

我正在寻找一个使用javascript (如果可能的话，jquery)的单行选框水平文本滚动淡入淡出效果的解决方案。就像旋转木马的文字卷轴。所有的谷歌搜索都给我提供了滚动效果，但没有淡出效果。

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

任何帮助都将不胜感激。

javascript

scroll

marquee

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-05-06 23:28:29

执行此操作的一种方法是创建选取框并在其边缘浮动半透明图像：

您找到的任何一个都很好，或者使用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中进行任何昂贵的处理。您也有更多种类的滚动可供选择，而不必担心何时或在哪里淡出。

缺点是半透明的pngs需要黑客才能在IE6中工作。但由于这只是吸引眼球的东西，我想那几个IE6用户不会受到太大影响。

票数 1

Stack Overflow用户

发布于 2010-05-06 23:31:56

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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/2782154

复制

相似问题

问具有淡入淡出效果的字幕水平文本滚动？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有淡入淡出效果的字幕水平文本滚动？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有淡入淡出效果的字幕水平文本滚动？
EN