xをマウスの位置で更新した後に画像を中央に置く

私は、マウスを動かすときに画像を左右にわずかに動かすスクリプトを持っています。問題は、常にこのイメージが私のウィンドウの左上にあることです。いつも私はそれがいつも中心にとどまる必要があります。xをマウスの位置で更新した後に画像を中央に置く

<html> 
<head> 

</head> 
<body> 

<img id="logo" src="logoHeader.png" style="position:absolute;" /> 
</body> 

<script lang="javascript"> 

function updateLogoPosition(e) 
{ 
    var logo = document.getElementById("logo"); 
    var m = e.x/12; 
    logo.style.left = m + "px"; 
} 

document.onmousemove = updateLogoPosition; 

</script> 
</html>

出典

2016-07-06 MonkeyAtWork

ここで画像はどこにあるはずですか？ – Thinker

私はそれが中心に見えるようにします。マウスが動くとき、それはマウスと同じx量を動かすが、中央に留まる。 – MonkeyAtWork

イメージを縦にセンタリングしますか？ – Alexis

あなたはこれを行うにはいくつかのより多くの計算を行う必要があります。

中間を見つけるには、ビューポートの幅と高さを知る必要があります。次に、マウスの位置を正規化して、e.xが行っていたときの左上からではなく中心線からのオフセットを計算する必要があります。

"modifier"でオフセットの暴力を変更できるようにする必要があります。

<html> 
<head> 
</head> 
<body> 

<img id="logo" src="http://placehold.it/150x150" style="position:absolute;" /> 

<script> 

    window.onload = setInitialLogoPosition; 
    document.onmousemove = updateLogoPosition; 


    function setInitialLogoPosition(){ 

     var bodyHeight = document.body.clientHeight; 
     var bodyWidth = document.body.clientWidth; 
     var logo = document.getElementById("logo"); 
     var logoWidth = logo.width; 
     var logoHeight = logo.height; 
     var leftOffset = (bodyWidth/2 - logoWidth/2); 
     var topOffset = (bodyHeight/2 - logoHeight/2); 

     logo.style.left = leftOffset; 
     logo.style.top = topOffset; 

    } 

    function updateLogoPosition(e){ 

     // Get height and width of body 
     var bodyHeight = document.body.clientHeight; 
     var bodyWidth = document.body.clientWidth; 

     // Get height and width of logo 
     var logo = document.getElementById("logo"); 
     var logoWidth = logo.width; 
     var logoHeight = logo.height; 

     /* Normalise the mouse so that 0 is the centre 
     with negative values to the left and positive to the right */ 
     var x = (e.x/bodyWidth * 100) - 50; 
     var y = (e.y/bodyHeight * 100) - 50; 

     // Calculate the position of the logo without mouse manipulation 
     var leftOffset = (bodyWidth/2 - logoWidth/2); 
     var topOffset = (bodyHeight/2 - logoHeight/2); 

     // Set violence of offset 
     var modifier = 0.5; 

     // Add the mouse offset to the central position 
     leftOffset += (x * modifier); 
     topOffset += (y * modifier); 


     // Apply the calculated position to the logo 
     logo.style.left = leftOffset + "px"; 
     logo.style.top = topOffset + "px"; 
    } 

</script> 

</body> 
</html>

出典

2016-07-06 14:22:40

素晴らしい！完璧に動作します。どうもありがとうございました！！ – MonkeyAtWork

ようこそ。それは解決する楽しい1つだった –

小さな問題の1つは、あなたがページの上にマウスを置くまで、ページが最初にロードされるとき、画像が画面の左上の領域に位置するということです。どのように私はそれを中心に開始することができますか？ – MonkeyAtWork

あなたはCSSでそれを行うことができ、水平方向中央に：

<img id="logo" src="logoHeader.png" style="position:relative; text-algin:center; display: block; margin: 0 auto;" />

jsFiddle

出典

2016-07-06 13:50:57 andybeli

それは右に移動するだけです – Alexis

問題の説明では、スクリプトを右または左に動かしたことがあると述べました。私はあなたのスクリプトが動作していると仮定しました。 – andybeli

これはほとんど動作していますが、いずれかの方向に移動するためにセンターをポイントとして使用する必要があるときは、一方向（右側）に移動するように見えます。 – MonkeyAtWork

xをマウスの位置で更新した後に画像を中央に置く

答えて

関連する問題