您的位置：首页 > 其它

一个简单的循环往复的动画效果

2016-02-23 11:07 351 查看

1、概述：在我们编程时会用到一些简单的动画效果，下面介绍一个：

2、代码如下：

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> By ShaZhou </TITLE>
</HEAD>

<BODY>

<div class="dotA" style="position:absolute">a</div>
<div class="dotB" style="position:absolute">b</div>
</BODY>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(sssss());

function sssss(){
$(".dotA").animate({top:"100px"},500);
$(".dotA").animate({top:"200px"},500);
$(".dotA").animate({top:"300px"},500);
$(".dotA").animate({top:"0px"},500);
$(".dotB").animate({top:"300px"},500);
$(".dotB").animate({top:"0px"},500);

setTimeout(sssss,10);
}
</script>
</HTML>

3、效果如下：

a
b

// $(document).ready(sssss());

function sssss(){
$(".dotA").animate({top:"100px"},500);
$(".dotA").animate({top:"200px"},500);
$(".dotA").animate({top:"300px"},500);
$(".dotA").animate({top:"0px"},500);
$(".dotB").animate({top:"300px"},500);
$(".dotB").animate({top:"0px"},500);

setTimeout(sssss,10);
}
// ]]>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航