css3实现左右移动 

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

 

posted @ 2015-12-03 16:05  像风一样自由~~~  阅读(2788)  评论(0)    收藏  举报