0

検索エンジンの用語で探しているものをどのように表現するかがよくわからないので、私がやろうとしていることは次のとおりです。

ページの中央に、クリックすると分離する分割を1つか2つ配置したいと思います。上部が上にスライドし、下部が下にスライドすると、中央にWebサイトのコンテンツが表示されます。

クリック

滑り台

それを適切に行うものを検索する方法が正確にはわかりません。私はこれのバリエーションを持っているいくつかのウェブサイトを見ました。ただし、左右に開くものだけです。これは難しいことだと思いますが、これを達成するための助けをいただければ幸いです。

よろしくお願いします、Bc。

4

5 に答える 5

2

JQuery を使用している場合は、ターゲット div で単にslideUpとslideDownを使用できます。

編集

実際、この場合、slideToggleが探しているものだと思います。

<script type='text/javascript'>
    $(document).ready(function() {
        $(".button").click(function() {
            $("#content).slideToggle();
        });
    });
</script>

<div class='button'>Top Panel</div>
<div id='content'>Content</div>
<div>Bottom Panel</div>
于 2012-05-22T19:19:43.943 に答える
2

これが必要だと思います：http://jsfiddle.net/WQCav/

HTML :

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS:

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS :

html,body
{
    width:100%;
    height:100%;
}
于 2012-05-22T19:56:07.983 に答える
1

この問題の修正を完了しました。divがその下の素材を超えないようにしたかったのですが、下にシフトしました。これにより、必要な半分に分割された分割が得られます-スライドするdivの下に何かが必要になります(別のdiv、または目に見えない高さを持つdivと、CSSでAutoの高さを持ち、メインラップで機能させるための高さ) .

これが私がしたことです：

私のCSS：

.slide {
    height:200px;
    background-color: white;
    padding:20px;
    margin-top:10px;
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

}




#show_div {
    margin-left: 40px;
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border: 1px solid #333;
    font-size: 20px;


}

これは見た目を美しくするためでした。以下は、機能の詳細です。

.show_hide {
    display:none;

コーディング: ヘッダーに JQ 関数を配置します。

 $(document).ready(function(){

        $(".slide").hide();
        $(".show").show();

    $('.show').click(function(){
    $(".slide").slideToggle();
    });

});

</p>

次に、div自体に、divのスタイルを設定して好きなように実行する実際の良いものを配置することを忘れないでください:

<a id="show_div" href="#" class="show">Browse Styles</a>


    <div class="slide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, nibh at iaculis ultrices, mi eros tincidunt enim, vitae vehicula lectus odio a ipsum. Aliquam erat volutpat. Fusce id nisl sit amet diam iaculis pulvinar. Sed ultrices ullamcorper ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mi arcu, porta ut elementum et, ullamcorper sed eros. In euismod tellus sed ipsum adipiscing suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac magna dui. Aenean nec leo libero. Pellentesque lacinia dolor a dui lacinia consectetur. Mauris euismod porta magna, non dignissim orci adipiscing malesuada. Phasellus nunc sapien, consectetur nec vestibulum ac, euismod a ipsum.

    </div>
​

これに関する主なバック ドローは、これを使用する div ごとに Jscript の 1 つのインスタンスを配置する必要があることです。そうしないと、すべてが同時にアクティブになります。ボタン (またはリンク) は、ページのどこにでも配置できます。いくつか並べてあり、クリックすると同じ場所からページが分割されます。

これらが複数必要な場合は、div に一意の ID を指定し、Jscript でそれらの名前を変更して魔法を実現することを忘れないでください。

JFIDDLE の例を次に示します: http://jsfiddle.net/vH3cK/1/

それが役立つことを願っています!

于 2012-05-22T19:43:17.543 に答える
0

最初の「div」は、2 つの異なる div で構成する必要があります。1 つは上部用で、もう 1 つは下部用です。ページのコンテンツは、最初に「display:none」のスタイルにする必要があります。ユーザーが最初の div をクリックすると、「$(selector).slideDown(500)」を使用してページ コンテンツが表示されます。テストする必要がありますが、魅力的に機能するはずです。.show()、.toggle()、およびさまざまな時間 (ミリ秒単位) を使用して、最適なものを確認できます。

于 2012-05-22T19:22:16.707 に答える
0

jQuery .animate() 関数も調べる必要があるかもしれません.CSSを使用していますが、これは一般的により良い方法です.

于 2012-05-22T19:24:12.490 に答える