如何用图像创建Javascipt / HTML5 Spinner列表？ [英] How to create Javascipt/HTML5 Spinner List with images?

问题描述

目标：使用图片（而不是文字）创建Javascript / HTML5旋转列表，以便用户输入重量和高度。 （示例图片/资源如下）。

环境/应用程序：使用Cordova / Ionic构建移动应用程序。只支持iOS（webkit css）。

有没有任何组件允许我实现这一点？

图片：

>

解决方案

给你一些想法如何可能实现一个微调。已使用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）{//点击位置处理。 // xPosition和yPosition相对于元素边界。 // 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）{//帮助函数//源：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 getClickPosition，false）;  

  #spinner {background：url http://i.stack.imgur.com/0Fc85m.png）; background-size：100％100％;背景重复：无重复; height：150px; width：300px;}＃number {background：url（http://i.stack.imgur.com/c0ufam.png）;背景重复：无重复; background-size：100％600px; height：150px; width：50px; margin-left：20px;}  

 < div id = spinner> < div id =number> < / div>< / div>< br />< div id =value>值：0< / div>  

>

Objective: Create a Javascript/HTML5 spinner list using images (not text) so user may enter weight and height. (example images/assets are below).

Environment/Application: Using Cordova/Ionic to build mobile application. Only supporting iOS (webkit css).

Are there any components out there that allow me to achieve this?

Images:

解决方案

This might give you some an idea of how it is possible to implement a spinner. Tested with Opera, Firefox and 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>

这篇关于如何用图像创建Javascipt / HTML5 Spinner列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！