调整大小时重新计算高度
Making Height Recalculate on Resize
请参阅CODEPEN以获得澄清:http://codepen.io/geochanto/pen/LGNWML
var maxHeight = 0;
$('li a').each(function() {
maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight();
var linkHeight = $(this).outerHeight();
var halfLinkHeight = parseInt(linkHeight / -2);
$(this). css({
'margin-top' : halfLinkHeight,
'height' : maxHeight
});
});
$("li").css("height", maxHeight);
所以我有一个代码,它计算链接的高度,然后使它们都是最高的一个的高度,并在顶部添加一些负边距,以便在它们各自的父对象内垂直居中对齐。一切都如我所愿,只是,我一直在尝试用各种方法使这个高度重新计算并应用于窗口大小调整上的<li>
和<a>
,但都没有成功。
我试过这些,但也许我的语法错了,idk:
- 如何创建一个jQuery函数(一个新的jQuery方法或插件)
- 对窗口事件运行Jquery函数:加载、调整大小和滚动
- 如何在窗口调整时调用jQuery中的函数
我在这里为您工作:http://codepen.io/anon/pen/RraVZE
它对css和javascript进行了一些更改。
我从你的标签上删除了绝对定位:
a {
display: block;
padding: 10px;
margin-left: 50px;
font-size: 16px;
line-height: 1.2;
font-family: "montserrat", Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #193170;
text-decoration: none;
word-wrap: break-word;
}
并修改了您的JavaScript:
$(document).ready(function() {
var maxHeight = 0;
function calculateHeight() {
$('li a').each(function() {
maxHeight = maxHeight > $(this).outerHeight() ? maxHeight : $(this).outerHeight();
});
$("li").css("height", maxHeight);
centerText();
}
function centerText() {
$('li a').each(function() {
var linkHeight = $(this).outerHeight();
var halfLinkHeight = parseInt((maxHeight - linkHeight) / 2);
$(this).css('margin-top', halfLinkHeight);
});
}
$(window).resize(function() {
calculateHeight();
});
calculateHeight();
});
相关文章:
- 如何计算每个元素's的高度,并将这些值用作函数中的变量
- 使用jquery计算包含另一个带边距元素的元素的高度
- 如何计算缩放后画布的新高度和宽度
- 获取计算高度-Javascript-而不是jQuery
- Chrome和Firefox之间的高度计算不同
- 无法从 AngularJS 中的元素计算偏移高度
- 展开预览(计算高度:函数)
- Div 不会自动计算高度
- 新偏移量更新字体大小后不计算高度
- 根据点击量或数字计算高度
- 调整大小时重新计算高度
- 在TextArea的自动大小上调整计算高度,理想地工作吗?(jsfiddle - updated)
- 为什么$(someElement).height()从来没有正确地为我计算高度
- 元素的大小需要重新计算高度,因为JSON数据被过滤
- 位置相对内容计算高度
- 沙狐不正确地计算高度
- 调整大小和计算高度- bug
- 绝对定位元素的计算高度
- 如何使用jquery计算高度
- 弹出窗口计算高度