1

これに対する答えはどこかにあるかもしれませんが、私はHTML、CSS、およびJSの経験がかなり限られています。私が試した答えは正しく機能していないようであるか、正しく入力されていないので、私はただ尋ねると思いました。

ページ（画像）の右側にボックスがあります。特定のポイントを通過するリストを入力すると、ボックスはそれらを含むように拡張されません。高さが静的に設定されているためです。JSスクリプトとCSSシートの両方を調整する場所を特定しました。正しく拡張するには、すべて同じ高さを設定する必要があります。動的に拡張する方法、または可能な設定ごとに高さを設定できる方法を探しています。変数または類似のものを介して。

これがCSSシート（タイトル付きスタイル）です

#content {height:868px;width:740px;float:left;position:relative}
#content > ul > li {position:relative;height:868px;width:100%;bottom:0}
.box1 {background:url(../images/bg_content.png) repeat;width:100%;height:100%;position:absolute;top:0;left:0}

両方のコンテンツセクションで調整する必要があるのは868pxの高さです。

これも同じ調整が必要なJSスクリプトです。（タイトルページ）

$('#content').stop().animate({height:'868px'})
    if (act!='') {
        $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
            $(act).css({display:'none'});
            $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
                act=page;   
            }); 
        })
    } else {
        $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
            act=page;   
        });     
    }

CSSを変更した数値に合わせて868の高さを調整すると、適切な調整が行われます。

私が話していることを具体的に見てみたい場合は、これが私が使用しているテンプレートです。

ダウンロード または ウェブサイトで、テンプレートのタイトルはトムサンダースです...それは8番です

ご覧いただきありがとうございます。

メリークリスマス

4

1 に答える 1

3

スクロールバーを追加します。

これらの設定を使用して、CSSプロパティで必要なときに#contentスクロールバーを内部に配置します。div overflow

#content {height:868px;width:740px;float:left;position:relative;overflow:auto;}


背景画像の修正：

background画像は元の高さの高さである768pxため、.box1CSSに変更を加え、.inner代わりに背景画像を配置して、スクロール部分もカバーするようにする必要があります。

.box1 {width:100%;height:100%;position:absolute;top:0;left:0}
.inner {background:url(../images/bg_content.png) repeat;padding:25px 55px 25px 60px;position:relative}


参照コメント：

「高さを調整する代わりに、ボックス内の両方のdivの下部にあるボタンで、クリックするとコンテンツを情報の次のセグメントにスクロールするという解決策にも満足しています。」

この機能を実現するには、2つのボタンを作成します。1つはにContinueなり、もう1つはになりますPrevious。これは、ULリストを分解してこれら2つのボタンを追加する方法に関するHTMLのモックアップセグメントです。<br />このソリューションでは、必要に応じて追加/削除する必要がある場合があります。

<li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
<li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>
<li><a href="#">Aut perferendis doloribus asperiores eveniet et voluptates repudiandae</a></li>
<li><a href="#">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</a></li>
</ul>

<a class="button1 continue"><span></span><strong>Continue</strong></a> <br /><br /><br /><br />

<a class="button1 previous"><span></span><strong>Previous</strong></a> <br /><br />

<ul class="list2 pad_bot1">
 <li><a href="#">Temporibus autem quibusdam et aut officiis debitis aut rerum</a></li>
 <li><a href="#">Necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae</a></li>
 <li><a href="#">Gon recusandae taque earum rerum hic tenetur a sapiente delectus</a></li>
 <li><a href="#">Aut reiciendis voluptatibus maiores alias consequatur</a></li>

次に、次のjQueryをファイルの下部script.js、ただし部分の内側に追加しますDocument Ready。

  // continue button
  $('.continue').click(function(){
     $('.inner').animate({top: -825}, 1000);  // NEGATIVE Value 768px min + button height 33px + a little extra = 825px
  });

  // previous button
  $('.previous').click(function(){
     $('.inner').animate({top: 0}, 1000);  // Reset top to 0. Therefore, this previous button is good for 2nd page, not 3rd.
  });

上記のjQueryCSS設定は、ボタンがページの下部に配置されていることを前提としています。必要に応じて特定の値を調整します。1000は、1000ミリ秒、つまり1秒のアニメーションを指します。

于 2012-12-25T20:20:27.957 に答える