第一种是用 css 写的
.links-cont {
border: 1px solid #dcbe6e;
height: 210px;
width: 1100px;
padding: 30px 30px;
overflow: hidden;
background-color: #ffffff;
}
.links-cont .links-logo {
width: 120px;
height: 60px;
margin: 0 14px 34px 14px;
text-align: center;
float: left;
}
.links-cont .links-logo img{
width:120px;
height:60px;
}
.logo{
display:inline-block;
transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
}
.logo:hover{
transform:translateY(-200px);
animation-play-state:running;
}
<div class="links-cont">
<div class="logo">
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div class="links-logo">
<img src="http://pic.58pic.com/58pic/13/19/32/38Q58PIC8Ek_1024.jpg" alt="">
</div>
<div style="clear: both; "></div>
</div>
</div>
第二种是用js写的
var timer = null;
var num=0;
$('.links-cont').hover(function(){
//获取盒子高度
var linksH = $('.links-cont').height();
//获取logo高度
var logosH = $('.links-cont .logo').height();
if(logosH > linksH)
{
//滚动
timer = setInterval(function(){
num++;
if(num==logosH){
$('.links-cont .logo').css({'marginTop':'0px'});
num=1;
}
$('.links-cont .logo').stop().animate({'marginTop':-num+'px'},20);
},20);
}
},function(){ clearInterval(timer);});