源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-04-13 14:29 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery实现动画效果的实例代码
[u]复制代码[/u] 代码如下:
    <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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部