×

jQuery实现动画效果的实例代码

作者:Terry2017.02.10来源:Web前端之家浏览:10237评论:0
关键词:JQueryJS

复制代码 代码如下:

    <style type="text/css">
       table{border:1px solid #666;}
       table td{border:1px solid #eee;width:200px;height:200px;}
       img{width: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>

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/svg1486656000720.html

网友评论文明上网理性发言已有0人参与

发表评论: