jQuery實現(xiàn)動畫效果的實例代碼
<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>
相關文章
jQuery+Ajax+PHP彈出層異步登錄效果(附源碼下載)
本文我們給大家介紹如何使用jQuery+Ajax+PHP彈出層異步登錄的應用。感興趣的朋友通過本文學習吧2016-05-05jQuery插件jquery.kxbdmarquee.js實現(xiàn)無縫滾動效果
這篇文章主要為大家詳細介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02Jquery和angularjs獲取check框選中的值的方法匯總
本文分別通過具體的實例向大家展示了jquery和angularjs獲取獲取check框選中的值的方法,非常的簡單實用,有需要的小伙伴可以參考下2016-01-01使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載
當要在有限的空間展示更多的信息時,我們經(jīng)常會采取鼠標滑過彈出更多相關信息層,提高互動性。尤其可以應用在公司照片墻、招聘網(wǎng)站求職者信息展示等等場景,本文給大家分享使用jquery實現(xiàn)鼠標滑過彈出更多相關信息層附源碼下載,感興趣的朋友參考下2015-11-11用JQuery在網(wǎng)頁中實現(xiàn)分隔條功能的代碼
在C/S系統(tǒng)中有專門的分隔條控件,很方便實現(xiàn),但在Asp.net中卻沒有。本文介紹了一種使用JQuery技術實現(xiàn)分隔條的功能2012-08-08