この記事では、マウスでテキストを移動するJSの方法について説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
これは非常にシンプルなマウス機能コードです。マウスをWebページに移動すると、マウスはマウスに続く一連のテキストによって移動されます。
次のようにコードをコピーします：<html>
<head>
<style type = "text/css">
.spanstyle {
色：000000;フォントサイズ：10pt;位置：絶対;上：-50px;可視性：表示されます
}
</style>
<スクリプト>
var x、y
var step = 18 //これは2つの隣接する文字間の間隔です
var flag = 0
var message = "wulin.com www.vevb.com訪問にようこそ！" //ここに表示する必要があるテキストを配置します
message = message.split（ ""）//文字列を配列に分解します
var xpos = new array（）//各位置のx座標を記録する配列を作成します
for（i = 0; i <= message.length-1; i ++）{//最初に各要素に初期値を割り当てます
xpos [i] = -50
}
var ypos = new array（）//各位置のy座標を記録する配列を作成します
for（i = 0; i <= message.length-1; i ++）{
ypos [i] = -200
}
関数movehandler（e）{//マウスの動きのイベントを処理します
x =（document.layers）？ e.pagex：document.body.scrollleft+event.clientx //ブラウザに従ってマウスの水平位置を指示する
y =（document.layers）？ e.pagey：document.body.scrolltop+event.clienty //マウスの垂直位置を記録します
flag = 1 //マウスの位置が変更されており、再計算する必要があります
}
function makeNake（）{
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 <message.length-1; 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 <message.length-1; i ++）{//各単語が配列のデータに従って配置されているレイヤーの座標を変更します
var thispan = eval（ "document.span"+i）//現在の操作object document.spanxを生成する
thisspan.left = xpos [i]
thisspan.top = ypos [i]
}
}
var timer = setimeout（ "makenake（）"、30）// 30ミリ秒後、状況に応じて各文字の位置を再度調整します。
}
</script>
</head>
<body bgcolor = "ffffff" onload = "makenake（）">
<スクリプト>
<！ - JavaScriptの始まり -
//ここで、各単語のコンテナとしてスパンを生成します
for（i = 0; i <= message.length-1; i ++）{
document.write（ "<span id = 'span"+i+"' class = 'spanstyle'>"）
document.write（message [i]）
document.write（ "</span>"）
}
//マウスの動きイベントを処理するプロセスを指定します
if（document.layers）{
document.captureevents（event.mousemove）;
}
document.onmousemove = movehandler;
// -JavaScriptの終わり - >
</script>
</body>
<br> <b>この効果はとてもクールですか？ </b> </br>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。