web-dev-qa-db-ja.com

Javascript：Jqueryまたはプラグインなしでマウスオーバーでズームイン

私はこれを何週間も探していましたが、何を間違っているのか、どうすればいいのかを伝えるための何かを見つけることができません。目標は、小さな画像のある製品に対して、マウスオーバーでのAmazonのズームインに似た機能を作成することです。

私は現在、2つの画像を必要とすることを認識していますが、1つは「ズームイン」サイズで、もう1つは「ズームアウト」サイズの画像が必要であることを認識しています。 Jqueryを使用していません-雇用主の要求により、Webサイトにプラグインまたはプラグインをインストールできません。私は基本的に、より難しい答えを求めていますが、それについては事前に謝罪します。私はこれを中程度のゼロから行わなければなりません。 警告：私はプログラミングの学生です。あなたがするようにそれを取る。

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

注：元々、グレーのボックスが相対的な中心でマウスに追従するように持っていました。移動するとちらつきましたが、動作していました。現在のところ、少なくとも私の仕事用コンピューターでは、そうしないことに決めています。私は自分のパソコンでテストしていません。

編集：コードはSurface Pro 3で動作していますが、画像からマウスを追います（これは一時的なもので、私がつかんだものです）。私の仕事用コンピューターでコードが機能しない理由はわかりませんが、それはMacintosh OSXバージョン10.6.8であるためと思われます...

HTMLコード：

<!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コード：

#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コード：

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";
}
javascripthtmlcsszoommouseover
15
Kitfoxpup

マウスオーバーで背景位置を再生するだけで、マウスオーバーで背景位置を移動できます [〜＃〜] 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>
33
CY5

これは私のために働く：（ここに 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にも同じロジックを適用できます。

7
Amit
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: 100px;
  height: 100px;
  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>
1
Ghufran Khalil