首先,感谢您阅读我的问题。当用户将鼠标悬停在其上时,我正在尝试制作3个图像的网格。我在很多网站上都看过这个,但我不知道这个效果/插件的名称是什么。所以我制作了一个图像,并且是我想要完成的事情的小提琴。
开始:
水平放置3张图像。除了右侧的一些first image
条之外,tab-like
几乎完全可见。当您将鼠标悬停在second image
上时,它会向左滑动,只留下右侧的一个小(再次)tab-like
栏。 third image
也是如此。看到我拍的这张照片。
如果用户没有悬停任何图片,则只会返回默认显示first image
以及second
和third image
状态tab-like
的状态。
我还制作了一个小提琴here来显示图像的动画方式。
但是你可以看到这并不完美。这里有没有人有我可以使用的片段,因为我的jQuery技能还没有。但是我觉得这个(应该)可以更容易实现,而且我认为代码更少?甚至可能更优雅。
感谢(长)阅读......
答案 0 :(得分:1)
这是一个简单的例子;]
$('li').hover(function() {
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})

li {
width: 0;
padding: 15px;
float: right;
height: 300px;
overflow: hidden;
cursor: pointer;
color: #fff;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: blue;
}
li.active {
width: 400px;
transition: all 1s;
}
ul {
list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
&#13;
答案 1 :(得分:1)
尝试使用zAccordian jquery插件。 https://natearmagost.github.io/zaccordion/index.html
答案 2 :(得分:1)
所以我改变了你的例子:
我做的是: 将位置更改为相对位置并将隐藏的溢出设置为 .wrapper
$(document).ready(function(){
$(".img-1").hover(function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
});
$(".img-2").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
});
$(".img-3").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
$('.img-3').stop().animate({'left': '40px'}, 500);
}, function(){
$('.img-3').stop().animate({'left': '180px'}, 500);
$('.img-2').stop().animate({'left': '160px'}, 500);
});
});
.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
border: black 1px solid;
width: 200px;
Height: 50px;
position:relative;
overflow: hidden;
top:0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="img-1">
</div>
<div class="img-2">
</div>
<div class="img-3">
</div>
</div>
答案 3 :(得分:1)
你可以用CSS完全做到这一点,不需要javascript。
以下示例在div
悬停时操纵z-index。唯一棘手的是'image-3'的悬停。 'image-2'的z-index也需要更改以确保它位于'image-1'之上。
因此,在HTML中,'image-2'位于'image-3'之后。比在CSS中'image-2'可以作为兄弟姐妹来解决。
[class^="img"] {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 3;
}
.img-1 img {
border: 6px solid #FF0;
}
.img-2 {
left: 20px;
z-index: 2;
}
.img-2 img {
border: 6px solid #F00;
}
.img-3 {
left: 40px;
z-index: 1;
}
.img-3 img {
border: 6px solid #F60;
}
div[class^="img"]:hover {
z-index: 5;
}
.img-3:hover+.img-2 {
z-index: 4;
}
<div class="wrapper">
<div class="img-1">
<img src="//placehold.it/200x50&text='image-1'" alt="">
</div>
<div class="img-3">
<img src="//placehold.it/200x50&text='image-3'" alt="">
</div>
<div class="img-2">
<img src="//placehold.it/200x50&text='image-2'" alt="">
</div>
</div>