Question

我有一组水平的Div，每个Div都持有游戏的得分表。目的是让用户在电话上滑动/滑动游戏桌，当用户移开他的手指时，程序将捕捉到下一个div。例如，如果出现游戏1，则当游戏1和游戏2都显示时，用户快速滑动并抬起手指，程序将前进到游戏2，而不是继续滑动。代码如下，demo here。任何和所有帮助表示赞赏。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css" media="screen">

table.swingTable {
    border-collapse: collapse;
    font-size: 12px;
    margin: 0px 0px 20px;
/* original: margin: 10px 10px 20px; */
    text-align: left;
    width:100%;
}
table.swingTable thead th.rounded-company {
    background: #ccc;
}
table.swingTable thead th.rounded-q4 {
    background: #ccc;
}
table.swingTable th {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #222222;
    font-size: 11px;
    /*font-size: 10px;*/
    font-weight: bold;
    padding: 6px;
    /*padding: 8px;*/
    text-transform: uppercase;
}
/*table.swingTable th#hole-shot{ width: 50;}*/
table.swingTable td {
    background: none repeat scroll 0 0 #eee;
    border-top: 1px solid #FFFFFF;
    color: #333;
    padding: 8px;
}

table.swingTable tfoot td.rounded-foot-left {
    background: #eee;
}
tabletfoot.swingTable td.rounded-foot-right {
    background: #eee;
}
table.swingTable tbody tr:hover td {
    background: none repeat scroll 0 0 #ddd;
}
  .slideContainer {
   white-space: nowrap;
  }
.horizontal{
   display: inline-block;
   margin:0 auto;
   border:2px solid;
   /*border-radius:25px;*/
   white-space: normal;
   width: 100%;

 /*left:0;right:0; */
}

</style>
<script>
$(document).ready(function()
{


});   // end main
</script>
</head>
<body>
<div class="slideContainer">

<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable"  >
<caption><strong>Game 1</strong></caption>
   <tr>
      <th>Swing#</th>
      <th>start</th>
      <th>H-Dis</th>
      <th>S-Dis</th>
      <th>SG</th>
      <th>Flags</th>
   </tr>
   <tr>
      <td>1</td>
      <td>T</td>
      <td>400</td>
      <td>300</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td>F</td>
      <td>100</td>
      <td>90</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td>G</td>
      <td>10</td>
      <td>10</td>
      <td>SG</td>
      <td>HO</td>
   </tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable"  >
<caption><strong>Game 2</strong></caption>
   <tr>
      <th>Swing#</th>
      <th>start</th>
      <th>H-Dis</th>
      <th>S-Dis</th>
      <th>SG</th>
      <th>Flags</th>
   </tr>
   <tr>
      <td>1</td>
      <td>T</td>
      <td>400</td>
      <td>300</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td>F</td>
      <td>100</td>
      <td>90</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td>G</td>
      <td>10</td>
      <td>10</td>
      <td>SG</td>
      <td>HO</td>
   </tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable"  >
<caption><strong>Game 3</strong></caption>
   <tr>
      <th>Swing#</th>
      <th>start</th>
      <th>H-Dis</th>
      <th>S-Dis</th>
      <th>SG</th>
      <th>Flags</th>
   </tr>
   <tr>
      <td>1</td>
      <td>T</td>
      <td>400</td>
      <td>300</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td>F</td>
      <td>100</td>
      <td>90</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td>G</td>
      <td>10</td>
      <td>10</td>
      <td>SG</td>
      <td>HO</td>
   </tr>
</table>
</div>
<div class="horizontal">
<table class="swingTable"  >
<caption><strong>Game 4</strong></caption>
   <tr>
      <th>Swing#</th>
      <th>start</th>
      <th>H-Dis</th>
      <th>S-Dis</th>
      <th>SG</th>
      <th>Flags</th>
   </tr>
   <tr>
      <td>1</td>
      <td>T</td>
      <td>400</td>
      <td>300</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td>F</td>
      <td>100</td>
      <td>90</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td>G</td>
      <td>10</td>
      <td>10</td>
      <td>SG</td>
      <td>HO</td>
   </tr>
</table>
</div>
<div class="horizontal" style="background: #DBDBDB">
<table class="swingTable"  >
<caption><strong>Game 5</strong></caption>
   <tr>
      <th>Swing#</th>
      <th>start</th>
      <th>H-Dis</th>
      <th>S-Dis</th>
      <th>SG</th>
      <th>Flags</th>
   </tr>
   <tr>
      <td>1</td>
      <td>T</td>
      <td>400</td>
      <td>300</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>2</td>
      <td>F</td>
      <td>100</td>
      <td>90</td>
      <td>0</td>
      <td></td>
   </tr>
   <tr>
      <td>3</td>
      <td>G</td>
      <td>10</td>
      <td>10</td>
      <td>SG</td>
      <td>HO</td>
   </tr>
</table>
</div>

</div>
</body>
</html>

在幻灯片或滑动上捕捉水平div

0 个答案: