<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>C3动画</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style>
#d2{width:40px;height:40px;background-color:red;float:left;
position:relative;}
@-webkit-keyframes move{
0%{left:10px;}
50%{left:250px;}
100%{left:10px;}
}
#d2{-webkit-animation:move 6s linear infinite;}
.bazi{
width: 90%;
height: 40px;
background-color: blue;
margin: 0 auto;
margin-top: 5%;
}
#btnStop{
position: absolute;
top: 25%;
}
#tip{
position: absolute;
top: 15%;
}
#close{
position: absolute;
top: 30%;
}
.stop{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
</style>
</head>
<body>
<div id="d2"></div>
<div class="bazi"></div>
<input id="btnStop" type="button" value="停止" />
<input id="close" type="button" value="再来一次" />
<div id="tip"></div>
<script type="text/javascript">
// var position=document.getElementById('d2');
$("#btnStop").bind("click", function () {
var $position = $('#d2');
if($position.offset().left / document.body.offsetWidth < 0.45){
$("#tip").html(600);
}else if($position.offset().left / document.body.offsetWidth > 0.5){
$("#tip").html(600);
}else{
$("#tip").html(parseInt(Math.random()*(1000-700+1) + 700));
}
/*if($position.offset().left / document.body.offsetWidth != 0.5){
$("#tip").html(600);
}*/
$("#d2").css("animation-play-state","paused");
$("#d2").css("-webkit-animation-play-state","paused");
/* $("#d2").addClass("stop");*/
});
$("#close").bind("click", function () {
/*$("#d2").css("-webkit-animation","move 6s linear infinite");*/
$("#d2").css("animation-play-state","running");
});
</script>
</body>
</html>
