Jquery淘宝动画

HTML部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312"/>
<title>Jquery淘宝动画</title>
<script src="jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="box">
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>
<a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a>

</div>

</body>
</html>

CSS部分：

 * {
            margin: 0;
            padding: 0;
            font-family:"微软雅黑"
            
        }
        #box{
            padding-left:20px;
            background-color:#f9f9f9;
            border:1px solid #ccc;
            width:236px;
            height:250px;
            margin:0 auto;
        }
        #box a{
            width:50px;
            height:60px;
            border:1px solid #ccc;
            float:left;
            margin:10px 10px;
            background-color:#FFFFFF;
            text-align:center;
            font-size:14px;
            position:relative;
        }
        #box a i{
            position:absolute;
            top:15px;
            left:18px;
        }
        #box a p{
            position:absolute;
            top:36px;
            left:5px;
        }
        #box a{
            cursor:pointer;
        }

jquery：

$(function(){
    $("#box a").mouseenter(function(){
        $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){
            $(this).css({top:"25px"});
            $(this).animate({top:"15px",opacity:"1"},200)
        })
    })
});

 

posted @ 2017-04-05 11:16  lexie  阅读(196)  评论(0)  编辑  收藏  举报