Javascript - Какие рамки для построения прокручиваемой карты с выбором элементов - PullRequest
0 голосов
/ 05 февраля 2012

Мне нужно прокрутить большую область карты на веб-сайте мобильного устройства и иметь возможность выбирать PNG или векторные изображения на карте, например:

enter image description here

Какой самый простой способ? HTML5, jQuery, Sencha Touch или?

1 Ответ

1 голос
/ 05 февраля 2012

Используя HTML5 canvas, вы можете прокручивать это так:

JS:

var img = new Image();  
img.src = 'image.jpg'; 

var w = $(window).outerWidth();
var h = $(window).height();

var addit = -1;
var scrollSpeed = 10; 
var current = 0;

ctx = document.getElementById('canvas1').getContext('2d');

var init = setInterval(function() {
               current += addit;
               ctx.drawImage(img,current,0, w, h);
           }, scrollSpeed);

CSS:

body {
  overflow: hidden;
}
#canvas1 {
  position: absolute;
  height: 100%;
  width: auto;
  left: 0;
  top: 0;
}

HTML:

<canvas id="canvas1" width="1784px" height="534px"></canvas>
...