<!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{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{ 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>