2

javascript（可能であればjquery）を使用して、フェード効果のある1行のマーキー水平テキストスクロールの解決策を探しています。カルーセルテキストスクロールのように。すべてのグーグル検索は私にスクロール効果を与えましたが、フェード効果はありませんでした。

私はこれがフラッシュで実行できることを知っていますが、他の解決策がある場合はそれを避けています。

どんな助けでも大歓迎です。

4

2 に答える 2

3 
<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>
于 2010-05-06T15:31:56.173 に答える
1

これを行う1つの方法は、マーキーを作成し、その端に半透明の画像をフローティングすることです。

見つけたものはどれでも問題ありません。または、jQueryに組み込まれている次のものを使用してください：http：//remysharp.com/demo/marquee.html

これがフェージング画像です：http：//www.collylogic.com/scripts/fade.png

上の画像のフェード効果を実際に見ることができるソースは次のとおりです

この方法の利点は、JavaScriptで高価な処理を行わないことです。また、いつどこでフェードするかを気にすることなく、さまざまなスクロールから選択できます。

欠点は、半透明のpngがIE6で機能するためにハックが必要なことです。しかし、それは単なる目玉なので、これらの少数のIE6ユーザーはそれほど影響を受けないと思います。

于 2010-05-06T15:28:28.700 に答える