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)
            })
        })
    });
  • 相关阅读:
    TTFB
    区分数组与对象
    单点登录使用163邮箱
    从其它系统登录到SharePoint 2010系统的单点登录
    js 弹出对话框3种方式
    PowerShell编辑
    修改SharePoint页面上的控件数量的限制
    在SharePoint 2010页面中嵌入SWF文件
    修改SharePoint列表项显示“新”图标的天数
    JSP页面显示乱码
  • 原文地址:https://www.cnblogs.com/lexie/p/6667864.html
Copyright © 2011-2022 走看看