原生jQuery背景动画效果

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div id="aaa">

<ul>

    <li><span><img src="1.png" /></span><a href="#">联系我们</a></li>

        <li><span><img src="2.png" /></span><a href="#">首页地址</a></li>

        <li><span><img src="3.png" /></span><a href="#">百度经验</a></li>

    </ul>

</div>

4、书写css代码。

<style>

*{ margin:0; padding:0; list-style:none;}

img{ border:0;}

body{ background:#fff;}

#aaa{ width:150px; height:auto; margin:200px auto; background:#F2F2F2; padding:20px;}

#aaa ul li{ height:42px; line-height:42px; padding-left:50px; text-align:left; margin:5px; position:relative; overflow:hidden;}

#aaa ul li span{ width:42px; height:84px; display:block; position:absolute; left:0; top:0;}

#aaa ul li a{ text-decoration:underline; color:#656565; font-size:12px;}

#aaa ul li:hover a{ text-decoration:none; color:#BC0000;}

</style>

5、书写并添加js代码。

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

<script>

$(function(){

$('#aaa li').hover(function(){

$('span',this).stop().an imate({'top':'-42px'});

},function(){

$('span',this).stop().ani mate({'top':'0px'});

});

});

</script>

6、代码整体结构。

7、查看效果。