質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

2421閲覧

ルーペ機能をブラウザスクロール対応にする方法

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/11 06:21

前提・実現したいこと

画像を表示させ解析を行うサイトを作成しているのですが、
下記サイトを参考にし、虫眼鏡のようなものを表示させ、一部分を拡大するような機能を実現することが出来ました。
ですが、画像サイズが大きい場合、スクロールが出来ず、また拡大率、拡大位置もずれてしまいます。
座標の取得方法を修正すれば良いと考えたのですがなかなか上手くいきません。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/11 10:15

下記サイトをご提示ください。
退会済みユーザー

退会済みユーザー

2018/11/11 12:13

もし何かアイディアがあれば、お力添えお願いいただきたいです。よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2018/11/11 12:54

えっと解析時の画像はinput type="file"でアップロードされていますか?そこらへんのHTMLも提示可能でしょうか?
退会済みユーザー

退会済みユーザー

2018/11/11 14:27

申し訳ありません。まだそこの部分を作成していないので、現時点では<img src="">で画像を表示させている状況です。ゆくゆくはinput typeでアップロードするつもりです。情報不足で申し訳ございません。
guest

回答1

0

スクロール対応のjQueryを使ったものを発見しましたので...

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>SAMPLE<title> 6<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 7<script src="okzoom.js"></script> 8<style> 9#okzoom { 10 width: 100%; 11} 12</style> 13</head> 14<body> 15<img id="okzoom" src="https://placehold.jp/500x500.png"> 16<script> 17$(function(){ 18 $('#okzoom').okzoom({ 19 width: 250, // ルーペの幅 20 height:250, // ルーペの高さ 21 round:true, // ルーペの形 22 border: "1px solid black", // ルーペのボーダー指定 23 shadow: "0 0 5px #000" // ルーペの影指定 24 }); 25}); 26</script> 27</body> 28</html>

okzoom.jsはこちらからダウンロードしてください

投稿2018/11/11 22:37

編集2018/11/11 22:37
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問