zoukankan      html  css  js  c++  java
  • 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)
            })
        })
    });
  • 相关阅读:
    java实现转方阵
    java实现转方阵
    java实现取球游戏
    java实现取球游戏
    java实现取球游戏
    java实现取球游戏
    java实现取球游戏
    java实现蓝桥杯约瑟夫环
    java实现蓝桥杯约瑟夫环
    免费css布局和模板集合
  • 原文地址:https://www.cnblogs.com/lexie/p/6667864.html
Copyright © 2011-2022 走看看