6

私は2つの三角形を作成しています（border- hackを使用）。これはページを垂直に塗りつぶします（したがって、両方の三角形はページの高さの50％になります）。私はうまくやった。

ただし、この計算を実行しようとすると、window.resize非常に遅くなります。毎回計算される変数がいくつかあることは承知していますが、これを高速化する方法を誰かが考えられるかどうか疑問に思っています...
私のjsfiddleを見て、ブラウザウィンドウのサイズを変更してください。-警告jsFiddleはしばらくするとクラッシュする可能性があります..それはそれがどれほど悪いかです。

現在、三角形はボディの幅から幅を引いた.mainものを2で割ったものであるため、三角形のエッジは.maindivの側面にちょうど接触します。
また、ウィンドウの高さ（$(window).outerHeight();）を計算し、それを2で割って、各三角形がウィンドウの高さの50％になるようにします。
次に、この高さを使用topして2番目の三角形に値を適用し、ページの後半に配置します。

コードのjsfiddleを確認することをお勧めしますが、ここにも配置します。

HTML

<div class="triangleWrap">
    <div class="borderTopLeft"></div>
    <div class="borderBottomLeft"></div>
</div>

<div class="main"></div>

JS

$('document').ready(function triangleCalc() {
    var bodyWidth = $('body').width();
    var bodyHeight = $(window).outerHeight();
    var mainWidth = $('.main').width();
    var bodyMinusMain = (bodyWidth - mainWidth) / 2;
    var bodyHeightCalc = bodyHeight / 2;
    $('.borderTopLeft, .borderBottomLeft').css('border-right', bodyMinusMain + 'px solid black');
    $('.borderTopLeft').css('border-bottom', bodyHeightCalc + 'px solid transparent');
    $('.borderBottomLeft').css({
        'border-top': bodyHeightCalc + 'px solid transparent',
        'top': bodyHeightCalc + 'px'
    });
    $(window).resize(triangleCalc);
});​

CSS

.borderTopLeft, .borderBottomLeft{
    width: 0;    
    height: 0;    
    position: absolute;
}
.borderTopLeft{border-top: 0 solid transparent;}
.borderBottomLeft{border-bottom: 0 solid transparent;}
.borderTopLeft{ 
    border-bottom: 500px solid transparent;       
    border-right:438px solid #2C2C2C;
}
.borderBottomLeft{
    border-top: 500px solid transparent;   
    border-right: 600px solid #2C2C2C;
    top: 500px;
}
.main{width:500px;height:400px;background:orange;margin:auto;}
4

1 に答える 1

4

それはひどく書かれたJavaScriptです。DOM参照をキャッシュしないことは、最悪のことです。

それはうまくいきますか？： http： //jsfiddle.net/NpDnu/

その他の最適化：

  • サイズ変更イベントを抑制します（とにかくOS /ブラウザー全体でアイコンが存在します）
  • それを切り離し、requestAnimationFrameを使用します
于 2012-09-17T10:37:59.430 に答える