前提・実現したいこと
画像を表示させ解析を行うサイトを作成しているのですが、
下記サイトを参考にし、虫眼鏡のようなものを表示させ、一部分を拡大するような機能を実現することが出来ました。
ですが、画像サイズが大きい場合、スクロールが出来ず、また拡大率、拡大位置もずれてしまいます。
座標の取得方法を修正すれば良いと考えたのですがなかなか上手くいきません。
jQuery、JavaScriptの知識がないため、どこを修正すればよいのか見当もつきません。
どなたかお力をお借りできませんでしょうか。
該当のソースコード
var scale = 2;
var $magnifyingGlass = $('<div class="magnifying_glass"></div>');
var $magnifiedContent = $('<div class="magnified_content"></div>');
var $magnifyingLens = $('<div class="magnifying_lens"></div>');
//setup
$magnifiedContent.css({
backgroundColor: $("html").css("background-color") || $("body").css("background-color"),
backgroundImage: $("html").css("background-image") || $("body").css("background-image"),
backgroundAttachment: $("html").css("background-attachment") || $("body").css("background-attachment"),
backgroundPosition: $("html").css("background-position") || $("body").css("background-position")
});
//$magnifiedContent.html(innerShiv($(document.body).html())); //fix html5 for ie<8, must also include script
$magnifiedContent.html($(document.body).html());
$magnifyingGlass.append($magnifiedContent);
$magnifyingGlass.append($magnifyingLens); //comment this line to allow interaction
$(document.body).append($magnifyingGlass);
//funcs
function updateViewSize() {
$magnifiedContent.css({
width: $(document).width(),
height: $(document).height()
});
}
//begin
updateViewSize();
//events
$(window).resize(updateViewSize);
$magnifyingGlass.mousedown(function(e) {
e.preventDefault();
$(this).data("drag", {
mouse: {
top: e.pageY,
left: e.pageX
},
offset: {
top: $(this).offset().top,
left: $(this).offset().left
}
});
});
$(document.body).mousemove(function(e) {
if ($magnifyingGlass.data("drag")) {
var drag = $magnifyingGlass.data("drag");
var left = drag.offset.left + (e.pageX - drag.mouse.left); var top = drag.offset.top + (e.pageY - drag.mouse.top); $magnifyingGlass.css({ left: left, top: top }); $magnifiedContent.css({ left: -left * scale, top: -top * scale }); }
}).mouseup(function() {
$magnifyingGlass.removeData("drag");
});
Jquery JavaScript HTML CSS