仿淘宝业务icon动画图标

 查看演示  website  立即下载

html结构如下,

<div id="move">
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
    <a href="#"><i><img src="images/zhu.png"></i><p>租房</p></a>
</div>

然后引入jquery框架，

在页面中写入一下js代码：

<script>
    $(function (){
        $('#move a').mouseenter(function () {
                $(this).find('i').animate({top:"-25px",opacity:"0"},300,function () {
                $(this).css({top:'25px'});
                $(this).animate({top:'12px',opacity:'1'},600)
            })
        })
    })
</script>

PREVIOUS:
NEXT:
css3过渡动画全屏导航菜单网页ui设计
jQuery微信开放平台注册表单