jQuery實(shí)現(xiàn)動(dòng)畫(huà)效果的實(shí)例代碼
<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>
相關(guān)文章
JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
這篇文章主要介紹了JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法,實(shí)例分析了jQuery創(chuàng)建元素結(jié)點(diǎn)、文本結(jié)點(diǎn)、屬性結(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
本文我們給大家介紹如何使用jQuery+Ajax+PHP彈出層異步登錄的應(yīng)用。感興趣的朋友通過(guò)本文學(xué)習(xí)吧2016-05-05
jQuery插件jquery.kxbdmarquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過(guò)具體的實(shí)例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下2016-01-01
jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的淡入淡出下拉菜單效果,涉及jquery操作頁(yè)面屬性的動(dòng)態(tài)添加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加標(biāo)簽事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載
當(dāng)要在有限的空間展示更多的信息時(shí)，我們經(jīng)常會(huì)采取鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層，提高互動(dòng)性。尤其可以應(yīng)用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場(chǎng)景，本文給大家分享使用jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)彈出更多相關(guān)信息層附源碼下載，感興趣的朋友參考下2015-11-11
用JQuery在網(wǎng)頁(yè)中實(shí)現(xiàn)分隔條功能的代碼
在C/S系統(tǒng)中有專門(mén)的分隔條控件，很方便實(shí)現(xiàn)，但在Asp.net中卻沒(méi)有。本文介紹了一種使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能2012-08-08
jquery如何解決resize執(zhí)行兩次的問(wèn)題
這篇文章主要介紹了jquery如何解決resize執(zhí)行兩次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07