我想创建一个圆形div，它可以扩展到其父div的全宽并显示内容。至少这是我希望用户体验的方式。我阅读了创建的类似主题，但要么它们不能满足我的需求，要么我就是不能很好地实现它们。这是我想要的样子的草图。
示意图
以下是我迄今为止所做的工作。
function revealDetail(detail_no) {
var i, x;
x = document.getElementsByClassName("home-insurance");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(detail_no).style.display = "block";
}.hero-slider {
position: relative;
margin-bottom: 50px;
}
.hero-slider .slides {
list-style: none;
*zoom: 1;
}
.hero-slider .slides:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}
.hero-slider .slides li {
min-height: 460px;
float: left;
margin-right: -100%;
width: 100%;
background-size: cover;
background-position: center center;
}
.hero-slider .slide-content {
border-radius: 3px;
background-color: white;
width: 25%;
padding: 30px;
margin-top: 50px;
margin-bottom: 30px;
}
@media screen and (max-width: 990px) {
.hero-slider .slide-content {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.hero-slider .slide-content {
width: 100%;
}
}
.hero-slider .slide-content .slide-title {
font-size: 35px;
font-size: 2.1875em;
font-weight: 300;
margin-bottom: 30px;
}
.hero-slider .slide-content .slide-title strong {
color: #0f75bd;
display: block;
font-weight: 300;
}
.hero-slider .slide-content p {
line-height: 2;
margin-bottom: 50px;
}
.hero-slider .flex-control-nav {
list-style: none;
position: absolute;
bottom: -50px;
width: 100%;
text-align: center;
}
.hero-slider .flex-control-nav li {
display: inline-block;
margin: 0 5px;
}
.hero-slider .flex-control-nav li a {
display: block;
width: 15px;
height: 15px;
background-color: #c6c7c7;
border-radius: 50%;
overflow: hidden;
text-indent: -99999px;
cursor: pointer;
}
.hero-slider .flex-control-nav li a.flex-active {
background-color: #0f75bd;
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
*zoom: 1;
}
.container:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.news-list {
margin-top: 50px;
}
.vertical-horizontal-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.row {
margin-left: -15px;
margin-right: -15px;
*zoom: 1;
}
.row:after {
content: " ";
clear: both;
display: block;
overflow: hidden;
height: 0;
}
.home-insurance {
jusitfy-content: center;
align-items: center;
cursor: pointer;
}
.home-insurance {
transition: 0.5s ease;
}
.home-insurance:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: 0.5s ease;
}
.h-insurance {
jusitfy-content: center;
align-items: center;
cursor: pointer;
background-color: #082336;
border-style: solid;
border-radius: 50%;
border-color: #082336;
}
.raise {
display: inline-block;
padding-top: 15px;
vertical-align: top;
text-align: center;
width: 100%;
}
.raise i {
font-size: 6vw;
color: #fff;
}
.raise span {
color: #fff;
margin-top: 15px;
}
.text-center {
text-align: center;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="hero hero-slider">
<ul class="slides">
<li>
<div class="container news-list vertical-horizontal-center" id="insurance-container">
<div class="col" style="background-color:black;display:none;height:100vh;" id="d0"></div>
<div class="col" style="background-color:black;display:none;height:100vh;" id="d1"></div>
<div class="col" style="background-color:black;display:none;height:100vh;" id="d2"></div>
<div class="col" style="background-color:black;display:none;height:100vh;" id="d3"></div>
<div class="col" style="background-color:black;display:none;height:100vh;" id="d4"></div>
<div class="row">
<div class="col smth home-insurance">
<div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d0')">
<i class="icon-credit-card-hand text-center"></i>
</div>
<span>Content0<span>
</div>
<div class="col smth home-insurance">
<div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d1')">
<i class="icon-credit-card-hand text-center"></i>
</div>
<span>Content1<span>
</div>
<div class="col smth home-insurance">
<div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d2')">
<i class="icon-credit-card-hand text-center"></i>
</div>
<span>Content2<span>
</div>
<div class="col smth home-insurance">
<div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d3')">
<i class="icon-credit-card-hand text-center"></i>
</div>
<span>Content3<span>
</div>
<div class="col smth home-insurance">
<div class="h-insurance raise text-center " style="height:10vw;width:10vw;" onclick="revealDetail('d4')">
<i class="icon-credit-card-hand text-center"></i>
</div>
<span>Content4<span>
</div>
<div class="col-12" id="d00" style="display:none;height:75vh;background-color:black">
<span style="color:#fff;">Kapat</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- .hero-slider -->
</body>https://jsfiddle.net/Okstrok/hsckz8nf/29/
- 您可以首先尝试从ul元素中删除填充：
.hero-slider .slides {
padding: 0;
}- 还要尝试赋予li元素中的内部div：
.container {
padding:0;
max-width: inherit;
}我已经设法使用jquery animate实现了动画。我已经向类h-insurance标识的元素添加了属性dnumber，并删除了"onclick(("函数
$('.h-insurance').on('click', function() {
let dnumber = '#' + $(this).attr('dnumber');
// hide all home-insurance div tags
$('.home-insurance').hide();
// show only the home-insurance div (circle) on which animation is required
$(this).closest('.home-insurance').show();
// hide caption of the circle
$(this).closest('.home-insurance').find('span').hide();
// animate the circle with time of 1000ms
$(this).animate({
height: '100vh',
width: '100%'
}, 1000);
// hide the circle and show the display block after 1000ms
// this code executes after the circle animation
setTimeout(function() {
$('.home-insurance').hide();
$(dnumber).show(1);
}, 1000);
});
检查jsfiddlehttps://jsfiddle.net/g73npm21/16/