jQuery实现动画效果

最新推荐文章于 2022-05-07 14:37:10 发布

商炳奇

最新推荐文章于 2022-05-07 14:37:10 发布

阅读量744

点赞数

分类专栏： C#

本文链接：https://blog.csdn.net/shang_111111/article/details/8892202

版权

C# 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<title></title>

<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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现动画效果

table{border:1px solid #666;} table td{border:1px solid #eee;width:200px;height:200px;} img{width:200px;height:200px;border:none;position:relative;} $(fu
复制链接

扫一扫

专栏目录