私は非常にクールな画像ビューアを作成していますが、ズームインしたときに画像をパンするという特定の部分に行き詰まっています。それは些細な問題のようで、SOに関する同様の質問に対するほとんどすべての回答を試しましたが、毎回何か正しく動作していません。新鮮な目が必要です。
開発サーバーで一時的に URL を開きました。このページを見てください：
【URL閉鎖】
次に、マウス ホイールを上に動かしてズームをトリガーします。ここにいます。拡大したら、クリック アンド ドラッグして画像をパンしてみます。正常にパンしていますが、何かがおかしいです。これは現在、パンに使用されているコードです。
var clicking = false;
var previousX;
var previousY;
$("#bigimage").mousedown(function(e) {
e.preventDefault();
previousX = e.clientX;
previousY = e.clientY;
clicking = true;
});
$(document).mouseup(function() {
clicking = false;
});
$("#bigimage").mousemove(function(e) {
if (clicking) {
e.preventDefault();
var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
$("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
$("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
previousX = e.clientX;
previousY = e.clientY;
}
});
私が探しているソリューションには、次の特徴があります。
- X 軸と Y 軸の正しいパン方向
- 画像の端の外側にパンすることはできません。
- 適度に流暢なパン
- あると便利: ウィンドウのサイズ変更で問題が発生することはありません
私が得られる助けに感謝しますが、一般的なプラグインを指摘しないでください。特定のシナリオで機能する答えを探しているので、あまりにも多くのプラグインを試しました。上記の特性を満たす完璧な解決策に報奨金を設定するほど必死です。
PS: Firefox または Webkit ブラウザーでリンクを試してください。