2

私はこの「divfollowsmouse」アニメーションを見つけまし た：投稿された答えに属するJSFiddle ： jqueryでマウスをフォローしてアニメーション化する方法。

var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.css({left:xp, top:yp});

}, 30);

</ p>

私は内部の仕組みに非常に興味をそそられ、コードが何をしているのかを理解しようとしました。私は現在javascriptを学んでおり、「ポイントツーポイント」アニメーションを複製しようとしました。私はこれを見つけました：ポイントツーポイントのアニメーションアルゴリズムですが、元のポスターのコードはかなり長く、反復的であるように感じます。

私の現在の基本的なレベルのjavascriptは、jQueryのバージョンを完全に理解する上での障害になっています（私はまだjQueryレルムに入りませんでした）。それでも、JavaScriptでこの種のアニメーションを実行することは可能かもしれないと思いますが、私が考えることができる唯一の方法は、「ポイントツーポイント」リンクに似たコードを使用することです。

このようなことは、jQueryバージョンと同じくらい短いコードで実行できますか？または、JavaScriptだけを実行するには、はるかに長いルーチンが必要ですか？

あなたが持っているかもしれない提案やコメントをありがとう！

4

1 に答える 1

4

このようなことは、jQueryバージョンと同じくらい短いコードで実行できますか？

この場合、ほぼそうです。実行されていることはかなり単純であり、jQueryの機能はごくわずかしか使用されていないためです。具体的には：

  • mousemoveでイベントをフックします。これは、 （または古いバージョンのIEで）document簡単に実行できます。addEventListenerattachEvent

  • id（ ）で要素を検索します。$("#follower")これは、で簡単に実行できますgetElementById。

  • jQueryの関数を介して要素のleftandを設定します。これは、要素のプロパティにプロパティとプロパティを設定することで簡単に実行できます。topcsslefttopstyle

それをすべてまとめる：フィドル

var mouseX = 0, mouseY = 0;
if (document.addEventListener) {
    document.addEventListener('mousemove', mouseMoveHandler, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', mouseMoveHandler);
}
else {
    document.onmousemove = function(event) {
        mouseMoveHandler(event || window.event);
    };
}

function mouseMoveHandler(e) {
   mouseX = e.pageX;
   mouseY = e.pageY; 
}

// cache the element
var follower = document.getElementById("follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
// change 12 to alter damping higher is slower
xp += (mouseX - xp) / 12;
yp += (mouseY - yp) / 12;
follower.style.left = xp + "px";
follower.style.top  = yp + "px";

}, 30);

ご覧のとおり、最大の問題は、他の人とうまく連携する方法でイベントをフックすることです。バージョンを使用することもできますが、それはでdocument.onmousemove他のmousemoveハンドラーを壊してしまいます。そのため、最初にまたはdocumentを探します。addEventListenerattachEvent

いくつかの便利なリファレンス、おおよそ時系列順（後のリファレンスは前のリファレンスに更新/置き換え/追加）：

jQueryのような優れたライブラリを使用できないと言ってはいけません。いくつかの理由があります（上記のイベントはほんの一例です）。ただし、ライブラリを使用してそれらをそれほど処理する必要がない場合でも、基本を理解することが常に最善です。

于 2012-12-01T10:19:16.373 に答える