level 4
有4个div
2016年04月11日 15点04分
level 4
hj68126675
楼主
2
level 3
level 2
不需要遍历，只用transform：translate()就可以实现，每次出现遮罩的效果，不要忘了加上transition,进行过渡。下面是我的代码，你试试
<style type="text/css">
.base{
height: 100px;
width: 100px;
background: url(img/8.jpg);
background-size: ;
margin: 100px auto;
position: relative;
overflow: hidden;/*溢出部分隐藏*/
}
.cavans{
height: 100px;
width: 100px;
background:grey;
opacity: .5;
position: absolute;
left:0;
top: -100px;/*高出 父级100px,下移时再下移100px */
transition:all 0.1s;
}
p{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="base">
<div class="cavans">
<p>in conteinter</p>
</div>
</div>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.base').mouseover(function(){
$('.cavans').css('transform','translateY(100px)')
} )
$('.base').mouseleave(function(){
$('.cavans').css('transform','translateY(0px)')
})
2016年04月14日 06点04分
12
<style type="text/css">
.base{
height: 100px;
width: 100px;
background: url(img/8.jpg);
background-size: ;
margin: 100px auto;
position: relative;
overflow: hidden;/*溢出部分隐藏*/
}
.cavans{
height: 100px;
width: 100px;
background:grey;
opacity: .5;
position: absolute;
left:0;
top: -100px;/*高出 父级100px,下移时再下移100px */
transition:all 0.1s;
}
p{
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="base">
<div class="cavans">
<p>in conteinter</p>
</div>
</div>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('.base').mouseover(function(){
$('.cavans').css('transform','translateY(100px)')
} )
$('.base').mouseleave(function(){
$('.cavans').css('transform','translateY(0px)')
})
非常感谢
2016年04月15日 21点04分