jquery - 要素をカーソルに引っ張る方法は？

Question

青い四角があり、フィギュア付きのボートの写真があります。青い四角の中にマウスポインタを置き、ボートをマウスカーソルに近づけて写真を撮りたいと思います。要素をカーソルに引っ張る方法とcss3に解決策はありますか？多くのThx。 デモ

Answer 1

私があなたの質問を正しく理解したと仮定すると、青い正方形の中にある間に、画像をユーザーのマウスの位置に近づけたいですか？

これは間違いなくJavascript/JQueryが必要になるようなもののようです-CSSは動的にそれを行うことができません。

このJQueryチュートリアルを調べて、内のユーザーのマウスの位置を見つけ、<div>そこから画像を（ここでもJQueryを使用して）その位置に移動します。

Answer 2

html：

<div id="wrapper">
  <div id="square">[]</div>
</div>

css：

#wrapper{width:400px; height:500px; background:#eeeeee; cursor:pointer;}
#square{font-size:36px; font-weight:bold; position:absolute;}

js：

$(document).ready(function(){
  $('#wrapper').on('mousemove', function(e){
     $('#square').offset({
       top: parseInt(e.pageY - $('#square').height() / 2),
       left: parseInt(e.pageX - $('#square').width() / 2)
     });
  }); 
});

デモ