万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

怎么用jQuery让鼠标放在图片上出现动画效果

luping 2015-12-22 技术

鼠标移到图片上,图片会显示文字说明,用jQuery代码实现:

<style type="text/css">
*{ margin:0; padding:0; list-style:none;}
.pic{ width:1100px; margin:0 auto; height:auto; background:#6FF; padding:30px;}
.pic ul{ height:200px;}
.pic li{ float:left; margin:10px; position:relative;}
.pic img{ width:250px; height:180px;}
.pic .text{ position:absolute; bottom:0 ; left:0; width:250px; background:#F9C;filter:alpha(opacity=50); opacity:0.5;}
.pic .text p{ text-align:center;}
</style>

<body>
<div class="pic">
<ul>
    <li>
    <img src="445426.jpg" />
    <div class="text">
    <p>女神</p>
    </div>
    </li>
    <li>
    <img src="980917.jpg" />
    <div class="text">
    <p>女神</p>
    </div>
    </li>
    <li>
    <img src="902599.jpg" />
    <div class="text">
    <p>男神</p>
    </div>
    </li>
    <li>
    <img src="931123.jpg" />
    <div class="text">
    <p>男神</p>
    </div>
    </li>
</ul>

</div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
	$('.pic li').hover(
		function(){
		$('.text',this).stop().animate({
			height:'100px'
		});
	},function(){
		$('.text',this).stop().animate({
			height:'22px'
		});
	});
});
</script>

--597

文章关键词
图片动画
jQuery
qq qq tel
服务热线:

134-1954-9128