gpt4 book ai didi

jquery - 获取 div 子元素的宽度以创建水平 slider

转载 作者:太空宇宙 更新时间:2023-11-04 12:07:09 25 4
gpt4 key购买 nike

在过去的一个小时里,我一直在努力让它工作,但我完全被困住了;下面仅返回第一个子项的宽度,其余子项在记录时返回宽度“0”。

JS

function getWidth() {
var $item = $('#image-inner-wrap .project-item'),
width = 0;

$item.each(function() {
width += $(this).width();
});

return width;
}

HTML最后三个元素是imgs:

<section id="image-wrap">
<div id="image-inner-wrap">
<div id="client-title" class="project-item">
<h1>Ink</h1>
</div>
<img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
<img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
<img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
</div>
</section>

CSS

#image-wrap {
position: absolute;
bottom: 0;
width: 100%;
height: 90%;
padding: 60px 60px 60px;
box-sizing: border-box;
z-index: 10;
}
#client-title,
#image-wrap img {
float: left;
height: 100%;
margin-right: 60px;
}
#client-title {
display: table;
width: 12%;
}
#client-title h1 {
display: table-cell;
vertical-align: middle;
font-size: 60px;
text-align: center;
}
#image-inner-wrap {
height: 100%;
}

我最初认为这可能是因为图像加载速度不够快,但即使使用 setTimeout 包装每个函数它也无法正常工作。有什么指点吗?

最佳答案

$(function) 在加载 HTML 文档且 DOM 准备就绪时执行。此时可能不一定加载图像,尤其是大图像,例如您在此处引用的这些图像。

$(window).load 当页面完全加载时执行,包括所有框架、对象和图像。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<section id="image-wrap">
<div id="image-inner-wrap">
<div id="client-title" class="project-item">
<h1>Ink</h1>
</div>
<img class="project-item" src="https://m1.behance.net/rendition/modules/159185859/hd/e73f3ac14e59899ad4488cfad44a5af8.jpg">
<img class="project-item" src="https://m1.behance.net/rendition/modules/159183497/hd/d93ad4f39d67c0627e33e88ac4a417c6.jpg">
<img class="project-item" src="https://m1.behance.net/rendition/modules/159183473/hd/6397ae0edc996e6db3e85e824b21e79e.jpg">
</div>
</section>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function getWidth() {
var $item = $('#image-inner-wrap .project-item'),
width = 0;
$item.each(function() {
width += $(this).width();
});
return width;
}
$(window).load(function() {
getWidth();
});
</script>
</body>
</html>

您还可以包括图像的宽度和高度属性,这将强制浏览器在图像加载之前渲染所有内容。每张图片所需的空间将在图片加载时保留。

关于jquery - 获取 div 子元素的宽度以创建水平 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29297568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com