1. 首页
  2. 问答
  3. jQuery - 全屏水平数字选择器

jQuery - 全屏水平数字选择器

2017-07-25 52 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

相关问题

 相关问题