6

我正在创建 2 个三角形（使用border- hack），它们垂直填充页面（所以两个三角形都是页面高度的 50%）。我做得很好。

但是，当我也试图让这个 calc 运行时，window.resize它非常慢。我知道我每次都会计算一些变量，但只是想知道是否有人能想出一种方法来加快速度……
看看我的jsfiddle，然后调整浏览器窗口的大小。- 警告 jsFiddle 可能会在一段时间后崩溃......这就是它有多糟糕。

目前，三角形计算出主体宽度，减去.main宽度，然后除以 2，这样三角形的边缘刚好接触到.maindiv 的边。
它还计算出窗口的高度 ( $(window).outerHeight();)，然后将其除以 2，这样每个三角形都有窗口高度的 50%。
然后它也使用这个高度，对top第二个三角形应用一个值，使它位于页面的后半部分。

我建议查看 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/

更多优化：

  • 限制调整大小事件（无论如何它在操作系统/浏览器中都是一致的）
  • 解耦并使用 requestAnimationFrame
于 2012-09-17T10:37:59.430 回答