我正在创建 2 个三角形(使用border- hack),它们垂直填充页面(所以两个三角形都是页面高度的 50%)。我做得很好。
但是,当我也试图让这个 calc 运行时,window.resize
它非常慢。我知道我每次都会计算一些变量,但只是想知道是否有人能想出一种方法来加快速度……
看看我的jsfiddle,然后调整浏览器窗口的大小。- 警告 jsFiddle 可能会在一段时间后崩溃......这就是它有多糟糕。
目前,三角形计算出主体宽度,减去.main
宽度,然后除以 2,这样三角形的边缘刚好接触到.main
div 的边。
它还计算出窗口的高度 ( $(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;}