如何使用图像创建 JavaScript/HTML5 微调器列表？

Posted 2023-03-05

【中文标题】如何使用图像创建 JavaScript/HTML5 微调器列表？

【英文标题】：How to create JavaScript/HTML5 Spinner List with images?

【发布时间】：2015-04-13 10:23:03

【问题描述】：

目标：使用图像（而非文本）创建一个 javascript/html5 微调器列表，以便用户可以输入体重和身高。 （示例图像/资产如下）。

环境/应用程序：使用 Cordova/Ionic 构建移动应用程序。仅支持 ios (webkit css)。

是否有任何组件可以让我实现这一目标？

图片：

【参考方案1】：

这可能会让您对如何实现微调器有所了解。使用 Opera、Firefox 和 Chrome for android 测试。

var NUM_HEIGHT = 55;
var Y_OFFSET = 50;
var SPINNER_HEIGHT = 150;

var targetPosition = 0;
var currentPosition = 0;
var deltaY = 0;

function targetReached() 
  deltaY = 0;
  currentPosition = targetPosition;
  document.getElementById("value").innerHTML = "Value: " + currentPosition;


function move() 
  var yPosition = -currentPosition * NUM_HEIGHT + deltaY + Y_OFFSET;
  document.getElementById("number").style.backgroundPosition = "0px " + yPosition + "px";

  if (targetPosition > currentPosition) 
    if (deltaY > -NUM_HEIGHT) 
      deltaY = deltaY - 5;
      setTimeout(move, 10);
     else 
      targetReached();
    
   else if (targetPosition < currentPosition) 
    if (deltaY < NUM_HEIGHT) 
      deltaY = deltaY + 5;
      setTimeout(move, 10);
     else 
      targetReached();
    
  

move();




function getClickPosition(e) 
  // Click position handling.
  // xPosition and yPosition are relative to element bounds.
  // Source: http://www.kirupa.com/html5/getting_mouse_click_position.htm
  var parentPosition = getPosition(e.currentTarget);
  var xPosition = e.clientX - parentPosition.x;
  var yPosition = e.clientY - parentPosition.y;

  if (yPosition > SPINNER_HEIGHT / 2 && currentPosition != 10) 
    targetPosition = currentPosition + 1;
   else if (yPosition < SPINNER_HEIGHT / 2 && currentPosition != 0) 
    targetPosition = currentPosition - 1;
  
  move();


function getPosition(element) 
  // Helper function
  // Source: http://www.kirupa.com/html5/getting_mouse_click_position.htm
  var xPosition = 0;
  var yPosition = 0;
  while (element) 
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
  
  return 
    x: xPosition,
    y: yPosition
  ;


// document.getElementById("number").addEventListener("click", getClickPosition, false);
document.getElementById("number").addEventListener("mousedown", getClickPosition, false);

#spinner 
  background: url(http://i.stack.imgur.com/0Fc85m.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 150px;
  width: 300px;

#number 
  background: url(http://i.stack.imgur.com/c0ufam.png);
  background-repeat: no-repeat;
  background-size: 100% 600px;
  height: 150px;
  width: 50px;
  margin-left: 20px;

<div id="spinner">
  <div id="number">
  </div>
</div>
<br />
<div id="value">Value: 0</div>