zoukankan      html  css  js  c++  java
  • jQuery实现动画效果

     <title></title>


        <style type="text/css">
           table{border:1px solid #666;}
           table td{border:1px solid #eee;200px;height:200px;}
           img{200px;height:200px;border:none;position:relative;}
        </style>


        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                //            $('img').click(function () {
                //                $('img').animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000)
                //                .animate({ left: '+=400px', top: '-=200px' }, 1).animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000)
                //                .animate({ left: '+=400px', top: '-=200px' }, 1).animate({ left: '-=200x' }, 2000).animate({ left: '-=200px' }, 2000)
                //            })
                var i = 0; var c = 0;
                $('img').click(function () {
                    if (c < 3) {
                        if (i == 2 & c == 0) { $('img').animate({ left: '+=400px', top: '-=200px' }, 1); c++ }
                        else if (i == 2 & c == 1) { $('img').animate({ left: '-=200px' }, 2000); c++ }
                        else if (i == 2 & c == 2) { $('img').animate({ left: '-=200px' }, 2000); c = 0; i++; }


                        else if (i == 3 & c == 0) { $('img').animate({ left: '+=400px', top: '-=200px' }, 1); c++ }
                        else if (i == 3 & c == 1) { $('img').animate({ left: '-=200px' }, 2000); c++ }
                        else if (i == 3 & c == 2) { $('img').animate({ left: '-=200px' }, 2000); c++; }
                        else { $('img').animate({ left: '-=200px' }, 2000); i++; }
                    }
                })
            })
        </script>


    </head>
    <body>
       <table cellpadding="0" cellspacing="0">
          <tr>
            <td> </td> <td></td> <td></td>
          </tr>


           <tr>
            <td></td> <td></td> <td></td>
          </tr>


           <tr>
            <td></td> <td></td> <td><img src="images/2.gif" alt="奔跑的小人" /></td>
          </tr>
       </table>
    </body>
    </html>

  • 相关阅读:
    数据库信息 (表名 行数 堆 集群 非聚集)的查询
    jquerygalleryview2.0 漂亮多样化的图片特效(多项自定义)
    枚举 EnumDescription 位运算 权限 sql c#
    vs2010缓存类
    透明遮罩层
    app_offline.htm的作用
    XmlToJSON(c#)
    jquery性能最佳实践
    .net面试问答(大汇总)
    apk反编译
  • 原文地址:https://www.cnblogs.com/qiqiBoKe/p/3063581.html
Copyright © 2011-2022 走看看