jQuery实现动画效果的实例代码
<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>
相关文章
全选、全非选即取得被选中的值在日常开发应用中很广泛，下面有个不错的示例，大家可以感受下2013-11-11
这篇文章主要介绍了jQuery实现的简单在线计算器功能,结合完整实例形式分析了jQuery实现简单四则运算的相关操作技巧,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了浅析jQuery Ajax请求参数和返回数据的处理的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了用简洁的jQuery方法toggleClass实现隔行换色，很简单，但很实用，需要的朋友可以看看2014-10-10
这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下2015-08-08
花了几个小时用jqury写的分页效果实现，功能基本实现需要再封装下 呵呵～～2009-11-11
jQuery中如何判断当前点击的是第几个li，使用$(this).index()取得li的下标，下面的示例，大家可以看看2014-09-09
jQuery选择器源码解读（七）：elementMatcher函数
这篇文章主要介绍了jQuery选择器源码解读（七）：elementMatcher函数,本文讲解了源码、功能、参数、返回函数 等内容,需要的朋友可以参考下2015-03-03
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
这篇文章主要介绍了jQuery flip插件实现的翻牌效果,可实现类似卡罗牌翻页的视觉效果,涉及jquery.flip.min.js插件的使用,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了基于jquery实现多级菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论