1. 首頁
  2. 問答
  3. jQuery - 全屏水平數字選擇器

jQuery - 全屏水平數字選擇器

2017-07-25 50 views
-2

我想創建一個水平滾動數字選擇器，我願意使用大多數技術，但我認爲jQuery將成爲最有可能的候選人。jQuery - 全屏水平數字選擇器

enter image description here

我想實現這樣的事情...

任何人做過什麼相似或可以點我一個解決的正確方向？

來源

2017-07-25 fightstarr20

回答

1

這是一個使用jQuery slim的非常簡單的解決方案。用最大數字替換'10'，用最小數字替換'0'。如果你需要大量數量的話，你可以增加width的#container，你可以用箭頭中的一些小箭頭代替⇐和⇒。代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     #container { 
      background-color: grey; 
      height: 45px; 
      width: 70px; 
      padding-top: 15px; 
      text-align: center; 
      vertical-align: middle; 
      border-radius: 3px; 
     } 
     span { 
      font-size: 20px; 
      -webkit-touch-callout: none; 
      -webkit-user-select: none; 
      -khtml-user-select: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none; 
     } 
    </style> 
</head> 
<body> 
<div id="container"> 
    <span id="left"> 
     &#x21D0; 
    </span> 
    <span id="number"> 
     0 
    </span> 
    <span id="right"> 
     &#x21D2; 
    </span> 
</div> 
<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script type="text/javascript"> 
$('#left').click(function() { 
    number = $('#number'); 
    if (number.html() != '0') { 
     number.html(parseInt(number.html()) - 1); 
    } 
}); 
$('#right').click(function() { 
    number = $('#number'); 
    if (number.html() != '10') { 
     number.html(parseInt(number.html()) + 1); 
    } 
}); 
</script> 
</body> 
</html>

來源

2017-07-25 08:52:33 FelixFrog

相關問題

 相關問題