0

私は 5 つの 5 div を持っています。それらの div にカーソルを合わせると、ダイアログ ボックスにコンテンツが表示されます...ダイアログ ボックスの右に、それぞれの div のビデオを配置したい..

div1 にカーソルを合わせると最初のビデオが表示され、2 番目の div にカーソルを合わせると 2 番目のビデオが表示されます...

では、それぞれのdivにカーソルを合わせると、同じ場所に異なるビデオを表示する方法は?

以下はスクリーンショットです： ここに画像の説明を入力

できるだけ早く返信してください.. よろしくお願いします...

4

2 に答える 2

1

1 つのビデオ オブジェクトを使用している場合は、src プロパティを変更できます。これはまだテストしていませんが、有望に見えます...

アプローチ 1:動画の URL を配列に保存する

var initVideos = function(){
    var videos = ["http://urlVideo1.flv", "http://urlVideo2.flv", ...],
        videoArea = $("#videoArea"),
        divs = $("ul li div"); // or some other selector for your HTML

    // bind your hover event to the divs
    divs.hover(
        // mouseover
        function(){
            videoArea.show();
            videoArea.find("object > embed").prop("src", videos[$(this).index()]);
        },
        // mouseout
        function(){
            videoArea.hide();
        }
    );
};

// once the DOM is ready
(function(){
    initVideos();
});

デモ: http://jsfiddle.net/tive/J6WQm/

これを微調整するには、前のイベントのロードが完了した後にのみ src を変更する必要があります。そうしないと、ホバーの速度が速すぎると、ブラウザが大量のリフローを生成する可能性があります。

また、使用するオブジェクトによってコードが異なる場合があります。現時点では、埋め込みオブジェクト (mozzila ブラウザー) のみをトリガーしていますが、オブジェクト (IE) も param movie 値でトリガーする必要があります。

これらのさまざまなオブジェクトに対抗するために、プログラム ロジックの人々はswf オブジェクトを使用してそのコード ブロックを生成しました。現在、これはかなり時代遅れになっています。

そのため、より適切なアプローチはflashembedを使用することです

アプローチ 2:メニューのリンクから href プロパティを使用する

var initVideos = function () {
    var divs = $("ul li a");

    // bind your hover event to the divs
    divs.mouseenter(
        // mouseover
        function () {
            flashembed("videoArea", $(this).prop("href"));
        });
    };

    // once all is loaded
    $(window).load(function () {
        initVideos();
    });

demo: http://jsfiddle.net/tive/Ff7Mq/ 残念ながら、このライブラリは jsfiddle では動作しませんでした。また、jquery 1.7 までサポートします。おそらく誰かが最新のプラグインを知っているでしょう。

編集:それを機能させるために必要なのは CSS だけでした ^^

于 2013-05-01T12:29:41.890 に答える