我想做类似 this website 的东西. 当我单击箭头时,左侧的 div 折叠,右侧的 div 展开。 问题是右边div的内容没有展开!
这是我的 html:
<div class="tools-bg">
<div class="tools">
</div>
</div>
<div class="arrow"></div>
<div class="picture-holder">
<div class="allpartsofthepic">
<div id="row1" class="tr">
<div id="prt1" class="td"></div>
<div id="prt2" class="td"></div>
<div id="prt3" class="td"></div>
<div id="prt4" class="td"></div>
<div id="prt5" class="td"></div>
<div id="prt6" class="td"></div>
<div id="prt7" class="td"></div>
<div id="prt8" class="td"></div>
<div id="prt9" class="td"></div>
<div id="prt10" class="td"></div>
</div>
</div>
</div>
这是我的 CSS:
.tools-bg
{
background: none repeat scroll 0 0 #ededed;
float: left;
height: 450px;
width: 350px;
}
.tools
{
margin: 40px;
}
.arrow
{
background-color: #ccc;
color: #666;
font-size: 2em;
height: 450px;
float:left;
padding-top: 167px;
text-align: center;
width: 50px;
cursor:pointer;
}
.tr
{
display:block;
}
.td
{
width:278px;
height:265px;
float:left;
}
.picture-holder
{
float: left;
overflow: hidden;
height:450px;
width:70%;
}
#prt1{ background-image:url("../image/01_01_01.png");}
#prt2{ background-image:url("../image/01_01_02.png");}
#prt3{ background-image:url("../image/01_01_03.png");}
#prt4{ background-image:url("../image/01_02_01.png");}
#prt5{ background-image:url("../image/01_02_02.png");}
#prt6{ background-image:url("../image/01_02_03.png");}
#prt7{ background-image:url("../image/01_03_01.png");}
#prt8{ background-image:url("../image/01_03_02.png");}
#prt9{ background-image:url("../image/01_03_03.png");}
#prt10{ background-image:url("../image/01_04_01.png");}
我认为问题出在我的 CSS 中,但我无法解决。请帮助我。
最佳答案
您可以在运行滑动动画之前计算图片支架的宽度,方法是简单地从整个容器中减去箭头宽度。
然后您将能够使用 CSS3 翻译来为它们制作动画。
$(function(){
var totalWidth = $(document).width();
var arrowWidth = $('.arrow').width();
var holderWidth = totalWidth - arrowWidth;
$('.picture-holder').width(holderWidth);
$('.arrow').on('click', function(){
$('body').toggleClass('slide-left');
});
});
body{
margin: 0;
position: relative;
overflow-x: hidden;
}
.tools-bg
{
background: none repeat scroll 0 0 #ededed;
float: left;
height: 450px;
width: 350px;
}
.tools
{
margin: 40px;
}
.arrow
{
background-color: #ccc;
color: #666;
font-size: 2em;
height: 450px;
float:left;
padding-top: 167px;
text-align: center;
width: 50px;
cursor:pointer;
-webkit-box-sizing: border-box;
}
.tr
{
display:block;
}
.td
{
width:278px;
height:265px;
float:left;
}
.picture-holder
{
position: absolute;
left: 50px;
top: 0;
overflow: hidden;
height:450px;
width: 70%;
background: cyan;
-webkit-transform: translate(350px, 0);
}
.slide-left .arrow,
.slide-left .tools-bg{
-webkit-transform: translate(-350px, 0);
}
.slide-left .picture-holder{
-webkit-transform: translate(0);
}
.tools-bg,
.arrow,
.picture-holder{
-webkit-transition: all .3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tools-bg">
<div class="tools">
</div>
</div>
<div class="arrow"></div>
<div class="picture-holder">
<div class="allpartsofthepic">
<div id="row1" class="tr">
<div id="prt1" class="td"></div>
<div id="prt2" class="td"></div>
<div id="prt3" class="td"></div>
<div id="prt4" class="td"></div>
<div id="prt5" class="td"></div>
<div id="prt6" class="td"></div>
<div id="prt7" class="td"></div>
<div id="prt8" class="td"></div>
<div id="prt9" class="td"></div>
<div id="prt10" class="td"></div>
</div>
</div>
关于jquery - 当它的邻居 div 向左滑动时,div 没有扩展它的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28825997/