jQuery鼠标滑过图片透明文字遮罩向上滑出效果



76 302 101



特效描述:jQuery 鼠标滑过图片 透明文字遮罩 向上滑出效果,jQuery鼠标滑过图片透明文字遮罩向上滑出效果

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<!-- 代码部分begin -->
<div id="zzsc">
	<ul>
    	<li>
        	<a href="http://www.51qianduan.com//"><img src="images/1.jpg"  /></a>
        	<div class="text">
            <b>菜单导航</b>
            <p>51前端,让开发更简单。</p></div>    
        </li>
        <li>
        	<a href="http://www.51qianduan.com//"><img src="images/2.jpg"  /></a>
        	<div class="text">
            <b>网页特效</b>
            <p>51前端,让开发更简单。</p></div>    
        </li>
        <li>
        	<a href="http://www.51qianduan.com//"><img src="images/3.jpg"  /></a>
        	<div class="text">
            <b>网站模板</b>
            <p>51前端,让开发更简单。</p></div>    
        </li>
        <li>
        	<a href="http://www.51qianduan.com//"><img src="images/4.jpg"  /></a>
        	<div class="text">
            <b>flash特效</b>
            <p>51前端,让开发更简单。</p></div>    
        </li>
    </ul>
</div>
<script>
$(function(){
	$('#zzsc li').hover(function(){
		$('.text',this).stop().animate({
			height:'165px'
		});
	},function(){
		$('.text',this).stop().animate({
			height:'0'
		});
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册