[英]CSS expand width from right to left
我需要建立一种类似jQuery手风琴的效果。 屏幕上有10个项目; 当鼠标悬停在某个项目上时,它的宽度会扩大。 如何使最后5个项目从右向左扩展?
我的HTML:
<div class="wrap">
<div style="width: 165.25px; background: rgb(228, 228, 230);" class="item"></div>
<div style="width: 165.25px; background: rgb(35, 123, 192);" class="item"></div>
<div style="width: 165.25px; background: rgb(20, 4, 4);" class="item"></div>
<div style="width: 165.25px; background: rgb(182, 159, 36);" class="item"></div>
<div style="width: 165.25px; background: rgb(162, 169, 180);" class="item"></div>
<div style="width: 161px; background: rgb(37, 29, 4);" class="item"></div>
<div style="width: 161px; background: red;" class="item"></div>
<div style="width: 161px; background: rgb(88, 45, 45);" class="item"></div>
<div style="width: 161px; background: rgb(202, 41, 176);" class="item"></div>
<div style="width: 161px; background: rgb(24, 207, 185);" class="item"></div>
</div>
这是我的CSS:
.wrap{
width:100%;
float:left;
height: 300px;
overflow: hidden;
}
.item {
float:left;
height: 100%;
display: block;
}
jQuery代码:
$('.item').each(function(e){
$(this).css('width', ($(this).parent().width()/10));
});
$('.item').on('mouseenter', function(event) {
$(this).stop().animate({width: "50%"}, {duration: 500});
}).on('mouseleave', function(event) {
$(this).stop().animate({width: ($(this).parent().width()/10)}, {duration: 500});
});
谢谢。
您需要在内部添加另一个具有较大宽度的wrapper div,以确保浮动元素不会换行到下一行。 然后,当悬停的元素为#5或更高版本时,将外部包装div滚动到正确的位置:
$('.item').on('mouseenter', function(event) {
//Animate width
$(this).stop().animate({width: $(this).parent().parent().width()/2}, {duration: 500});
if($(this).index() >= 5){
//Animate scrollLeft
var marginLeft = $(this).parent().parent().width() / 10 * 4;
$(this).parent().parent().stop().animate({scrollLeft: marginLeft + 'px'}, {duration: 500});
}
}).on('mouseleave', function(event) {
//Animate width
$(this).stop().animate({width: ($(this).parent().parent().width()/10)}, {duration: 500});
//Animate scrollLeft
$(this).parent().parent().stop().animate({scrollLeft: 0}, {duration: 500});
});
您可以在这里看到它的工作原理 : jsFiddle链接
这个想法是在增加悬停元素的宽度时减少其他项目的宽度。
JSFiddle 。
var items = $('.item');
var itemsCount = items.length;
var fullWidth = $('.item:first').parent().width();
items.each(function()
{
$(this).css('width', fullWidth / itemsCount);
});
items.on('mouseenter', function()
{
items.not(this).stop().animate({ width: fullWidth / itemsCount / 2 }, 500);
$(this).stop().animate({ width: "50%" }, 500 );
});
items.on('mouseleave', function()
{
items.stop().animate({ width: fullWidth / itemsCount }, 500);
});
有一件奇怪的事情:由于fullWidth / itemsCount / 2
而不是正确的fullWidth / (itemsCount - 1) / 2
在手风琴的右边框上有一个空的位置,但是带有fullWidth / (itemsCount - 1) / 2
最后一个元素有时会消失从屏幕上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.