これは、独自のマウスホイールのスムーズスクロールを使用しているときにマウスポインターにズームする方法へのフォローアップの質問です?
css 変換を使用して、画像をマウス ポインターにズームしています。また、独自のスムーズ スクロール アルゴリズムを使用して補間し、マウスホイールに勢いを与えています。
前回の質問でバリ バロの助けを借りて、私は 90% の方法を得ることができました。
次の JSFiddle が示すように、スムーズなスクロールを維持しながら、マウス ポインターまで画像をズームできるようになりました。
ただし、マウス ポインターを移動すると、機能が壊れます。
さらに明確にするために、マウスホイールの 1 つのノッチを拡大すると、画像は正しい位置にズームされます。この動作は、マウスホイールでズームインするたびに、完全に意図したとおりに続きます。ただし、途中でズームした後にマウスを別の位置に移動すると、機能が壊れ、ズーム位置を変更するには完全にズームアウトする必要があります。
意図された動作は、ズーム プロセス中のマウス位置の変更が、ズームされた画像に正しく反映されるようにすることです。
現在の動作を制御する 2 つの主な関数は次のとおりです。
self.container.on('mousewheel', function (e, delta) {
var offset = self.image.offset();
self.mouseLocation.x = (e.pageX - offset.left) / self.currentscale;
self.mouseLocation.y = (e.pageY - offset.top) / self.currentscale;
if (!self.running) {
self.running = true;
self.animateLoop();
}
self.delta = delta
self.smoothWheel(delta);
return false;
});
この関数は、ズームされた画像の現在のスケールでのマウスの現在の位置を収集します。
次に、スムーズ スクロール アルゴリズムを開始し、補間ごとに次の関数が呼び出されます。
zoom: function (scale) {
var self = this;
self.currentLocation.x += ((self.mouseLocation.x - self.currentLocation.x) / self.currentscale);
self.currentLocation.y += ((self.mouseLocation.y - self.currentLocation.y) / self.currentscale);
var compat = ['-moz-', '-webkit-', '-o-', '-ms-', ''];
var newCss = {};
for (var i = compat.length - 1; i; i--) {
newCss[compat[i] + 'transform'] = 'scale(' + scale + ')';
newCss[compat[i] + 'transform-origin'] = self.currentLocation.x + 'px ' + self.currentLocation.y + 'px';
}
self.image.css(newCss);
self.currentscale = scale;
},
この関数は、スケール量 (1 ～ 10) を受け取り、CSS 変換を適用し、transform-origin を使用して画像を再配置します。
これは、画像が完全に縮小されたときに選択された静止マウス位置では完全に機能します。上記のように、部分ズーム後にマウスカーソルを移動すると壊れます。
助けていただける方には、あらかじめ多大な感謝を申し上げます。