マウスの動きに合わせてテキスト移動を実現するjsメソッド_javascriptスキル

この記事の例では、js がマウスの動きに続いてテキストの動きを実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

これは、Web ページ上でマウスを動かすと、マウスの動きに合わせてテキスト文字列が表示される非常に単純なマウス機能コードです。

コードをコピー コードは次のとおりです:

<頭>

<スクリプト>
var x,y
var step=18 //これは 2 つの隣接する単語間の間隔です
var flag=0
var message="スクリプト ハウス www.jb51.net へようこそ! //ここに表示する必要があるテキストを入力してください
message=message.split("") //文字列を配列に分割します
var xpos=new Array() //各位置の x 座標を記録する配列を作成します
for (i=0;i xpos[i]=-50
}
var ypos=new Array() //各位置の y 座標を記録する配列を作成します
for (i=0;i ypos[i]=-200
}
function movehandler(e){ //マウス移動イベントを処理します
x = (document.layers) ? e.pageX : document.body.scrollLeftevent.clientX //さまざまなブラウザに応じて、マウスの水平位置を記録します
y = (document.layers) ? e.pageY : document.body.scrollTopevent.clientY //マウスの垂直位置を記録します
flag=1 //マウスの位置が変更されたため、再計算する必要があります
}
関数 makesnake() {
if (flag==1 && document.all) { //IE の場合
for (i=message.length-1; i>=1; i--) { //座標キューを処理
xpos[i]=xpos[i-1] step //各座標データを 1 スペース前に移動し、文字間隔を追加します
ypos[i]=ypos[i-1]
}
xpos[0]=x step //新しいデータを座標データキューの最後に書き込みます
ypos[0]=y
for (i=0; i var thisspan = eval("span" (i) ".style")// 現在の操作オブジェクトを生成します。spanx.style
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
else if (flag==1 && document.layers) { //NS の場合
for (i=message.length-1; i>=1; i--) { //座標キューを処理
xpos[i]=xpos[i-1] step //各座標データを 1 スペース前に移動し、文字間隔を追加します
ypos[i]=ypos[i-1]
}
xpos[0]=x step //新しいデータを座標データキューの最後に書き込みます
ypos[0]=y
for (i=0; i 内のデータに従って各単語が配置されているレイヤーの座標を変更します var thisspan = eval("document.span" i) //現在の操作オブジェクトを生成します document.spanx
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30) //30ミリ秒後、再度状況に応じて各キャラクターの位置を調整します
}



<スクリプト>




このエフェクト素敵だと思いませんか？

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。