帶觸摸和標記支持的jQuery圖像滾動視圖

我有一個應該在100％縮放下觀看的大圖像，並且用戶可以在移動設備上滾動（設備寬度爲100％的可滾動視圖）。當他們在大圖中找到正確的位置時，他們應該能夠在該位置放置一個標記並保存它（因此，在提交表單時應該可以檢索X和Y點）。帶觸摸和標記支持的jQuery圖像滾動視圖

什麼庫最適合用於此目的？我現在已經在網上搜索了好幾個小時，並且找不到解決我的問題的方法。我確實找到了如何製作可觸摸滾動的圖像，以及如何爲圖像添加標記，但將它們結合在一起並不像我希望的那麼容易。

是否有任何庫可以完成這些任務？

來源

2014-03-01 Nick

我最近有一個類似的項目。我不確定這與您正在進行的移動可滾動內容有什麼關係，但標記數學可能會類似。我沒有找到合適的圖書館，最後寫了我自己的圖書館。我沒有這個代碼，但是它比較直截了當。

它並沒有太多的魔力。基本上，您希望找到點擊座標（event.pageX和event.pageY），調整圖像的.offset().left和offset().top值，然後將它們與圖像的height和width進行比較，以便以圖像的百分比計算座標。

如果您希望調整圖像大小並使標記保持原位，則x/y值的比例將變得很重要。你只是想確保在一個容器內的圖像與relative定位，你可以根據需要重新計算明確的x/y值。

喜歡的東西：

var marks = []; 
var $img = $("img"); 

$img.on("click",function(e){ 

    marks.push({ 
     x: (e.pageX - $img.offset().left)/$img.width(), 
     y: (e.pageY - $img.offset().top)/$img.width(), 
     id: marks.length 
    }); 

    drawMarks(); 
}); 

function drawMarks(){ 

    var mCount = marks.length; 

    $(".mark").remove(); 

    while(mCount--){ 

     var mark = marks[mCount]; 

     $("<div class='mark' >") 
      .data("id", mark.id) 
      .appendTo('.holder') 
      .css("top", mark.y * $img.width() + "px") 
      .css("left", mark.x * $img.width() + "px"); 
    } 
}

http://jsfiddle.net/K6jwn/

來源

2014-03-01 01:54:47 Malk

帶觸摸和標記支持的jQuery圖像滾動視圖

回答

相關問題