html+css资料来源于网络
项目遇到一个小问题,需要在鼠标放置在div上时,div中隐藏的图片自中间缓慢展开。
查到了两种方法,其中第二种方法能够完美解决。
1.使用jq的slide:
<script type="text/javascript" language="javascript">
$(function() {
$(".part_arrow").hover(function() {
$(this).children('a').find('.arrow_img').slideDown("slow");
},
function() {
$(this).children('a').find('.arrow_img').slideUp("slow");
});
});
</script>
其中,part_arrow是一个div的class名。
这个实现的效果是在鼠标滑过名为part_arrow的div时,该div中的a元素中类名的arrow_img的元素(如p或者img)就会出现与隐藏。方向是自上到下。
问题:展开方向与需求方向不同。
2.使用css的动画:
<!DOCTYPE html>
<html>
<head>
<style>
img
{
width:100px;
background:blue;
position: absolute;
top: 50%;
height: 0px;
transition: top .5s,height .5s;
-webkit-transition: top .5s,height .5s;
}
div
{
width:100px;
height:300px;
background:blue;
}
div:hover img
{
top:0%;
height:100%;
}
</style>
</head>
<body>
<div><img src="http://img05.tooopen.com/images/20150820/tooopen_sy_139205349641.jpg"></div>
<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>
当鼠标悬停在div上时图片自中间向两边拉长