Question

这是链接 http://t3n.de/news/billig-rechner-intel-compute-stick-587589/

在此页面的左侧底行，有一个像信封一样的图像。当您将鼠标悬停在此图像上时，图像会弹出。我不确定这个效果叫什么？其实我在项目中需要这个效果。我怎么能这样做？

Answer 1

请参阅this - 不需要使用jquery - 只需要纯css！

但下面是我想要实现的想法的一个简单例子：

img{
  margin-top:50px; /*for demo purposes*/
  margin-left:50px; /*for demo purposes*/
  transition: all 0.8s;
}

img:hover{
  transform:scale(1.8);
  transform-origin: center bottom;
}

<img src="http://placekitten.com/g/60/40" alt=""/>

对于供应商前缀/兼容性，请点击here

Answer 2

在jQuery中你可以这样做：

$('.flyout').on('mouseenter', function(){
    $(this).animate({
        bottom: '0px'
    }); 
});

CSS：

.flyout{
    position: fixed;
    bottom: -70px;
    height: 70px;
}

在滚动时再次隐藏它：

$(document).on('scroll',function(){ 
    $('.flyout').animate({
         bottom: '-70px';
    });
});

对图像的弹出效果

2 个答案: