.animate on jQuery 给我带来了麻烦,所以我想在没有它的情况下调整 div 的大小。
我正在寻找使用 CSS 放大框。我有 4 个彼此相邻的框,当单击其中一个时,它应该放大,而其余的框移出屏幕(可能所有左边的都向左,所有右边的都向右)。这些框在一个矩形中,也应该放大..
我认为这可以通过在 CSS 中创建一个新类 (.thumb:click) 来完成,但是我如何使用 Javascript/HTML 来执行放大和推出屏幕?
HTML:
<div class="portItem">
<div class="itemContent-wrap">
<div class="itemContent">
<div class="container">
<div class="thumbWrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
</div>
</div>
CSS:
.itemContent-wrap {
display: inline-block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.itemContent {
height: 250px;
width: auto;
position: static;
display: block;
background: #ffffff;
box-shadow: 1px 0px 20px black;
margin-bottom: 10px;
margin-left:-12.5%;
margin-right:-12.5%;
overflow-y: hidden;
}
.container {
width: 110%;
margin: 0 auto;
background: transparent;
position: relative;
}
.thumbWrap {
height: 220px;
white-space: nowrap;
width: 2000px;
}
.thumb {
height: 200px;
width: 450px;
position: relative;
display: inline-block;
background: #D0E182;
margin-top: 25px;
margin-right: 5px;
}
//my guess...
.thumb:click {
}
Javascript(在使用 .animate 时...想避免这种情况)
$(document).ready(function(){
$('.thumb').click(function()
{
$('.itemContent').css("cursor","pointer");
$('.itemContent').animate({height: "500px"}, 'slow');
$(this).animate({width: "900px",height:"400px"}, 'slow');
});
$('.thumb').mouseout(function()
{
$('.itemContent').animate({height: "250px"}, 'slow');
$(this).animate({width: "450px",height:"200px"}, 'slow');
});
});
JSFiddle:http://jsfiddle.net/g4GFb/
提前致谢!
最佳答案
CSS 中没有关于 :click 行为的内容。所以你用 JS/HTML 做对了。 我会建议这个关于 jQuery 向左/向右滑动的教程:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions
我还会添加一个 .active 类来帮助您为所有 div 编写一个全局函数
希望这有帮助吗?
关于html - 使用 CSS 放大 div 并在单击时删除同一父级下的其他 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18833919/