本文介绍了一个使用jQuery实现的图片动画案例，通过点击图片触发一系列移动动画，并演示了如何使用按钮来停止动画或延迟隐藏图片。
<head>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
img
{
width:150px;
height:200px;
position:relative;
}
td{width:150px;height:200px;}
table{border:solid 1px black;}
</style>
<script type="text/javascript">
$(function () {
$('img').click(function () {
$(this).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000);
})
//停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画
$('#btnStop').click(function () {
$('img').stop();
})
$('#btnYanChi').click(function () {
$('img').delay(2000).hide(2000);
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="images/泪奔1.gif" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<input id="btnStop" type="button" value="stop" />
<input id="btnYanChi" type="button" value="延迟执行" />
</body>
<title></title>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
img
{
width:150px;
height:200px;
position:relative;
}
td{width:150px;height:200px;}
table{border:solid 1px black;}
</style>
<script type="text/javascript">
$(function () {
$('img').click(function () {
$(this).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ left: '-=150px' }, 2000).animate({ top: '+=200px' }, 2000).animate({ left: '+=150px' }, 2000).animate({ left: '+=150px' }, 2000);
})
//停止动画，当一个元素有一个动画队列时，停止的是当前动画，紧接着执行下一个动画
$('#btnStop').click(function () {
$('img').stop();
})
$('#btnYanChi').click(function () {
$('img').delay(2000).hide(2000);
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="images/泪奔1.gif" />
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<input id="btnStop" type="button" value="stop" />
<input id="btnYanChi" type="button" value="延迟执行" />
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
