css实现出牌的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pokers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }
      .poker{
          position: absolute;
          zoom:0.5;
          #background-size:cover;
      }
    </style>
    <link href="./css/bootstrap-responsive.css" rel="stylesheet">

  </head>

  <body>
    <!--img id="fmrlose" src="./img/playCard.png" style="display:block;" /--> 
    <div class="poker" id = "div" style="background-image:url(./img/playCard.png); top:0px; left:0px; width:112px; height:171px;"></div>
    <div class="poker" id = 'div2' style="background-image:url(./img/playCard.png); width:112px; height:171px; background-position: 224px 0px; top:0px;left:40px;"></div>
	<div></div>
  </body>
  <script>
      var gflag = false;
      var div2 = document.getElementById('div');
	  div2.addEventListener('touchend', function(){
	    move();
	  })

      function move(){
	    var val = parseInt(document.getElementById('div').style.top);
	    if(!gflag){
		  val -= 12;
	      document.getElementById('div').style.top = val+'px';
		  gflag = true;
		}else{
		  val += 12;
		  document.getElementById('div').style.top = val+'px';
		  gflag = false;
		}
	  }
  </script>
</html>

你可能感兴趣的:(css实现出牌的效果)