我有一个带有图像的 div 和周围环境中的其他几个 div。现在,我正在对图像进行一些动画处理,但它会取代其下方的内容。有什么办法可以解决吗?
这是我的演示 done .我希望在不影响下部 div 的情况下缩放移动图像。
我使用的 javascript 是:-
<script>
$(document).ready(function() {
$('.itemDisplay').mouseenter(function(e) {
$(this).find('.itemimgWrap').children('img').animate({ height: '135', left: '-20', top: '-20'}, 100);
}).mouseleave(function(e) {
$(this).find('.itemimgWrap').children('img').animate({ height: '120', left: '0', top: '0'}, 100);
});
});
</script>
最佳答案
如果你想避免图像覆盖文本,你需要将图像容器设置为 120px 和 overflow:hidden
;)
.itemimgWrap{
overflow: hidden;
height: 120px;
}
您可以使用 CSS3 制作动画(但我仍然推荐使用 Jquery):
.itemimgWrap img {
transform: scale(1);
transition-timing-function: ease-out;
transition-duration: 500ms;
}
.itemimgWrap img:hover{
transform: scale(1.5);
transition-timing-function: ease-out;
transition-duration: 500ms;
}
关于jquery - 使用所有其他 div 常量在 div 中缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13370048/