提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery实例动画代码 实现 效果
2023-06-13 09:14:52 时间

复制代码代码如下:


   <styletype="text/css">
      table{border:1pxsolid#666;}
      tabletd{border:1pxsolid#eee;width:200px;height:200px;}
      img{width:200px;height:200px;border:none;position:relative;}
   </style>


   <scriptsrc="jquery-1.9.1.js"type="text/javascript"></script>
   <scripttype="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)
           //           })
           vari=0;varc=0;
           $("img").click(function(){
               if(c<3){
                   if(i==2&c==0){$("img").animate({left:"+=400px",top:"-=200px"},1);c++}
                   elseif(i==2&c==1){$("img").animate({left:"-=200px"},2000);c++}
                   elseif(i==2&c==2){$("img").animate({left:"-=200px"},2000);c=0;i++;}


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

</head>
<body>
  <tablecellpadding="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><imgsrc="images/2.gif"alt="奔跑的小人"/></td>
     </tr>
  </table>
</body>
</html>

相关文章