<!DOCTYPE HTML>
<html>
<head>
<title>jQuery类似Flickr加载动画效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script type="text/javascript">
$(function() {
var wwidth = $(window).width();
var bluewidth = $("#shapeblue").width();
$("#shapeblue").css("left", (wwidth/2) - bluewidth);
var bluepos = $("#shapeblue").position();
var movex = $("#shapeblue").width() + 4;
$("#shapepink").css("left", bluepos.left + movex);
var playAnimate;
function moveleft(el) {
$(el).animate({
left: '+='+movex
}, 800, function() {
$(el).css("z-index", "-100");
});
}
function moveright(el) {
$(el).animate({
left: '-='+movex
}, 800, function() {
$(el).css("z-index", "100");
});
}
function playAnimation() {
moveleft("#shapeblue");
moveright("#shapeblue");
moveright("#shapepink");
moveleft("#shapepink");
}
$("#playbtn").click(function() {
if ($(this).text() == "Start") {
playAnimate = setInterval(playAnimation, 800);
$(this).text("Stop");
} else {
clearInterval(playAnimate);
$(this).text("Start");
}
return false;
});
});
</script>
<style type="text/css">
* {
font-family: Arial, "Free Sans";
}
#container {
text-align: center;
width: 800px;
padding: 40px 0;
margin: 0 auto;
}
#container a {
background: #0063dc;
color: #ffffff;
text-decoration: none;
padding: 5px 8px;
font-size: 18px;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
}
#container a:hover {
background: #ff0084;
}
#text {
color: #0063dc;
margin-top: 30px;
font-size: 12px;
font-weight: bold;
}
.bar {
width: 250px;
height: 250px;
-webkit-border-radius: 7.5em;
-moz-border-radius: 7.5em;
border-radius: 7.5em;
margin-right: 2px;
position: absolute;
}
#shapeblue {
background: #0063dc;
z-index: 1;
}
#shapepink {
background: #ff0084;
z-index: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="control">
<a href="" id="playbtn">Start</a>
<div id="text"> Click "Play" To Start Animation</div>
</div>
</div>
<div id="shapeblue" class="bar"></div>
<div id="shapepink" class="bar"></div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both"></div>
</body>
</html>
