Javascript：Joverやプラグインなしでマウスオーバーでズーム

私は何週間もこの場所を探しました。私が間違ってやっていることや進める方法を教えてくれるものが見つかりません。目指すのは、小さな画像を持つ製品の場合、Amazonがマウスオーバーをズームインするのと同様の機能を作成することです。Javascript：Joverやプラグインなしでマウスオーバーでズーム

私は現在、「ズームイン」サイズと「ズームアウト」サイズの2つの画像が必要であることを認識していますが、進行方法は失われています。 私はJqueryを使用していません - 私は雇用者の要求によってウェブサイトにプラグインまたはプラグインをインストールできません。私は基本的により難しい答えを求めています。私はそれを前もってお詫びします。私は中程度のスクラッチからこれをしなければなりません。警告：私はプログラミングの学生です。あなたの意志でそれを取る。

私はHTMLとCSSのスクリプトを持っています。私たちは実際にIDEを持っていないので、私はcodecademyのプロジェクトセクションでこれをやっています。そうしないと、完全にライブでプログラムする必要があります。あなたは私のコードhereを見つけることができますが、私はプロシージャの保存を使用するので、そのリンクは変更コードを持つようにバインドされているので、私はまた、下のコードを投稿します。

注：私はもともと、灰色のボックスが相対的な中心に私のマウスの後に来るようにしていました。動くにつれてちらついていたが、うまくいっていた。現在のところ、少なくとも私の仕事用コンピュータではそうしないと決めましたが、私は私のパーソナルコンピュータでそれをテストしていない。

編集：コードは私のSurface Pro 3で動作しますが、イメージのマウス（一時的なもので、ランダムに何かをつかんだもの）に従っています。

<!DOCTYPE html> 
<html> 
<head> 
    <link rel='stylesheet' href='style.css'/> 
    <script src='script.js'></script> 
</head> 
<body> 

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
<div id="overlay" onmousemove="zoomIn()"></div> 
</body> 
</html>

CSS：それは、Macintosh OSXバージョン10.6.8ですので、それはそうなのですけれども、私は...、

HTMLコードコードは私の仕事用のコンピュータ上で動作していない理由はわからないんだけどコード：

#imgZoom { 
    height: 300; 
} 

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:20%; 
    height:20%; 
    padding: 25px; 
    border: 5px solid gray; 
    background-color: white; 
    opacity:0.4; 
    text-align:center; 
    z-index: 1000; 
}

Javascriptコード：

出典

2015-11-19 Kitfoxpup

jQueryのはそのわずかアップロードまたは追加するようにインストールする必要はありませんWebサーバー上のファイル、またはjQuery CDNまたはそのWebサイトのsrcでスクリプトタグを挿入できない場合は、 '' – CY5

@ CY5申し訳ありませんが、私はfigu赤いJQueryは、特にBootstrapのようなものを使いたい場合は、インストールが必要でした。私がプログラミングのために学校に通っているところでは、ほとんどのインストラクターがJQueryに頼らないように警告しました。確かな答えよりも松葉杖なので、JQueryは悪いことではありません。方法。私はそれが主に私がそれを使用したくない理由だと思います、私はそれを手動で行う方法を学ぶことができます。私は実際には主にビデオゲームのプログラマーなので、助手のいない馬鹿げた難しいコードは、いつも私が一日中しているものです。 – Kitfoxpup

あなたは、あなたが物事がそこからどのように作られているのかを知ることを学んでいるので、あなたが時間の制約で働く場所が悪いことを覚えておいてください。もしあなたが何かツールで簡単にやり遂げることができれば、あなたのことが壊れているかどうかわからないことがあります。 – CY5

あなただけのだけのマウスオーバーで背景の位置を移動するマウスオーバーで背景の位置を再生してそれを行うことができますDEMO

function zoomIn(event) { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "inline-block"; 
 
    var img = document.getElementById("imgZoom"); 
 
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; 
 
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; 
 
    element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px"; 
 

 
} 
 

 
function zoomOut() { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "none"; 
 
}

#overlay { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg'); 
 
    background-repeat: no-repeat; 
 
}

<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
 
<div id="overlay" onmousemove="zoomIn(event)"></div>

出典

2015-11-19 18:40:35 CY5

これは素晴らしいように見えますが、これも実行しようとします。これまで私が受け取ったオプションはどちらも素晴らしいです！ – Kitfoxpup

私はあなたのコード@ CY5を試しましたが、画像の下部に正方形が表示され、ズームされた画像は静的であり、実際の画像の右上部分を示しています。 –

この

function zoomIn() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "visible"; 

    var x = event.clientX;  // Get the horizontal coordinate 
    var y = event.clientY;  // Get the vertical coordinate 

    element.style.top = y - 80; 
    element.style.left = x - 80; 
} 

function zoomOut() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "hidden"; 
}

は私のために動作します（ここで JSFiddle）

#imgZoom { 
    height: 300; 
} 
img#imgZoom:hover { 
    position: relative; 
    -webkit-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    transform: scale(1.5); 
    z-index: 1000; 
}

また、クールなトランジション効果のためにこれを追加することができ

：

* { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
}

*また、あなたが同じロジックではなく適用することができます画像の場合のみ、divの場合も同様です。

出典

2015-11-19 18:09:48 Amit

私はこれを試してみましょう！ – Kitfoxpup

ライブを見たい場合はJSFiddleを追加しました。 – Amit

それは非常に有用です。私の最後に移行することを拒否することを除いて、それは非常にいいように見え、実際に私が必要とするすべてであるかもしれません。私は雇用主によってこれを実行し、彼の考えを見ます！ありがとうございました！ – Kitfoxpup

Javascript：Joverやプラグインなしでマウスオーバーでズーム

答えて

関連する問題