0

私はWeb開発に比較的慣れていません。質問は一般的なものですが、特定のユーザー ケースを提示します。

ユースケース 1: Web ページに div 要素があります。ページが初めて読み込まれると、この div は小さな 5 秒のアニメーションを実行します。私がやりたいことは、このアニメーションが終了したときに、同じ div に他の要素を含めることです。画像、リンク、別のアニメーションなどです。つまり、1 つのコンテナー (div) で複数の要素をホストします。タイムスケール。最初の 5 秒間のアニメーションの後に、画像またはリンクが続きます。これを可能にする Javascript メソッドは何ですか?

ユースケース 2: 繰り返しますが、ページに div 要素があります。この div 要素は、タブ付きブラウザーのようなものです。別のタブをクリックすると、別の Web ページが表示されます。同様に、これを「タブ付き」の div にしたいと考えています。同様に、ユーザーがマウスをタブ 1 に置くと、div にビデオが表示され、タブ 2 にカーソルを合わせると、同じ div 内の別のビデオが表示されます。つまり、古いビデオが置き換えられます。タブは、凝った見た目のリンクと見なすことができます。

または、そもそも、上記のことを行うための「div」に代わるものはありますか?

ありがとう、SMK。

4

3 に答える 3

1

ユースケース 1 の例を次に示します。

HTML に 5 秒のアニメーションを含める必要があります。これは gif だと思いますか? どんな内容でも構いませんが。この例では、div として表示します。

私が使用したhtml：

<div id="example">
  <div id="somecontent">&nbsp;</div>
  <div id="morecontent">&nbsp;</div>
</div>

CSS:

#example
{
  width:500px;
  height:500px;
  background-color:#f00;
  padding:10px;    
}

#somecontent
{
  width:200px;  
  height:200px;    
  background-color:#fff;
}

#morecontent
{
  width:200px;
  display:none;
  height:200px;    
  background-color:#000;
}

およびjavascript（jQueryを使用）：

setTimeout(function() {
   $("#somecontent").fadeOut("slow", function() {
      $("#morecontent").fadeIn("slow"); 
   });
}, 5000);​

実際の動作については、この jsfiddle をご覧ください - http://jsfiddle.net/fntWZ/

ユース ケース 2 の場合は、より複雑になります。これに役立ついくつかの異なるプラグインを探してみてください

于 2012-05-26T08:49:35.090 に答える
1

ユース ケース 2 のソリューション - これは少し長いソリューションですが、非常に柔軟で、任意の数のタブに簡単に拡張できます。

ソリューションを CSS、HTML、JQuery の 3 つの部分に分割します。

まずCSS部分を見てみましょう

<style>

#tab_holder {
    width: 350px; !important
}
    #tab_holder .tabs {
        float: left;
        height: 20px;
        padding: 5px;
        border: 1px solid #eee;
        border-bottom: none;
        width: 50px;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
    }

    #tab_holder .tabs:hover {
        background-color: #eee;
    }   

    #tab_holder #content_holder {
        width: 400px; !important
        margin: 0 0 0 0;
        border: 1px solid #000;
        padding: 10px;
        float: left;
        border-radius: 0 5px 5px 5px;
    }

.content {
    visibility: hidden;
}

</style>

このソリューションの HTML 部分を見てみましょう。

<div id="tab_holder">
    <div id="tab1" class="tabs">Video1</div>
    <div id="tab2" class="tabs">Video2</div>
    <div id="tab3" class="tabs">Video3</div>
    <div id="content_holder">
        <div id="main_content">Select a tab to see the video..</div>
    </div>
</div>

<!-- These are divs in which you put your actual content. 
     They are always hidden -->
<div id="content1" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe> 
<    /div>   
<div id="content2" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>   
<div id="content3" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

各タブは、CSS セクションの「タブ」クラスを使用している div で表されていることがわかります。新しいタブを追加する必要がある場合は、新しい div を追加して新しい ID を指定するだけです。たとえば、4 番目のタブを追加するには、次のように言うことができます -

<div id="tab4" class="tabs">Video4</div>

それはそれと同じくらい簡単です。このアプローチで私が気に入っているのは、コンテンツを jquery の下にネストするのではなく、表示するコンテンツを div にも配置できることです。この場合、id content1 content2 content3の div を使用します。

これにより、コンテンツを div に入力する際に​​柔軟に展開し、通常のマークアップを使用しても、混乱したり安心したりできなくなります。

CSSで可視性を非表示に設定しているため、これらの div は表示されません。

新しいタブ div を追加する場合は、新しいコンテンツ div も追加する必要があります。

次に、JQuery の部分に移ります -

$(document).ready(function (){
        /* Add the listeners. */
        $("#tab1").mouseover(function (){
            switch_content('content1')
        });
        $("#tab2").mouseover(function (){
            switch_content('content2')
        });
        $("#tab3").mouseover(function (){
            switch_content('content3')
        });
    });

    function switch_content(name){
        $("#main_content").fadeOut('fast',function (){
            $("#main_content").html($("#"+name).html());
            $("#main_content").fadeIn('fast');
        });
    }

上記の JQuery 関数は非常に単純です。各タブには、 mousoverイベントによって起動されるアクション リスナーが関連付けられています。したがって、id=tab4 で別のタブを追加し、id=content4 でそれぞれのコンテンツ div を追加する場合、jQuery に追加する必要があるのは次のとおりです。

$("#tab4").mouseover(function (){
    switch_content('content4')
});

そのため、コードの拡張が非常に簡単になります。

私のウェブサイトのデモセクションで、これの動作するデモを見つけることができます

チップ -

  1. ホバーは、偶発的なホバーによってユーザー エクスペリエンスが煩わしく、モバイル プラットフォームでこのイベントをエミュレートするのが難しいため、使用しないでください。それらのほとんどはクリックにフォールバックします。そのため、代わりにクリック イベントを使用することをお勧めします。
  2. 使用する必要がある場合は、HTML ビデオ タグを使用し、ユーザーが別のタブにカーソルを置いた場合に JS を使用してビデオを一時停止します。これにより、ユーザー エクスペリエンスが向上します。
于 2012-05-26T19:39:27.487 に答える
-1

ユースケースの答え:1

css:

<style>
#myDiv {
    height:0;
    width:0;
    position:absolute;
    border:1px solid red;
}
</style>

脚本 ：

$(document).ready(function(){
    $("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
        var image = new Image();
        image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
        $("#myDiv").append(image);

            //you can append more content by using setTimeout function

            setTimeout(function(){
        var anc = "<a href=\"http://stackoverflow.com\">stackoverflow</a>";
        $("#myDiv").append(anc);
    }, 1000);

    });
});

html:

<div id="myDiv"></div>
于 2012-05-26T09:01:13.927 に答える