卵のないマウスの騒ぎの特効
1809 ワード
以前、ある兄のブログを見て、マウスが移動すると、後ろに小さなしっぽがついてきて、富強、民主などがあったので、自分でコードを書いて実現しようとしたので、私はオリジナルのjs実現方法を作りました.jQueryコードを使うともっと簡単で、私が書きたいです.特効www.sclifftop.comを見るには、chromeを使って閲覧するのが効果的で、携帯電話を使うとクリックする時だけ出てきます
先着コード
ちょっと説明します.
1、まず即時実行関数を使用します.これは実行2を直接呼び出し、それからイベントリスニング
先着コード
(function () {
// Array , new Array()
var arr = [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "];
var aIndex = 0;
document.onmousemove = function (ev) {
var oEvent = ev ? ev : window.event;
var tSpan = document.createElement('div');
aIndex = (aIndex + 1) % arr.length;
var sTxt = document.createTextNode(arr[aIndex]);
tSpan.appendChild(sTxt);
// DOM , ,
tSpan.style.left = (oEvent.clientX - 35) + 'px';
tSpan.style.top = (oEvent.clientY - 20) + 'px';
tSpan.style.position = 'absolute';
tSpan.style.width = '34px';
tSpan.style.height = '17px';
tSpan.style.fontWeight = "bold";
tSpan.style.color = "#2B9499";
tSpan.style.fontSize = 20;
tSpan.style.opacity = 0.76;
tSpan.style.zIndex = 100000;
document.body.appendChild(tSpan);
setTimeout(function () {
document.body.removeChild(tSpan);
}, 380)
}
})();
ちょっと説明します.
1、まず即時実行関数を使用します.これは実行2を直接呼び出し、それからイベントリスニング
onmousemove
を追加します.マウスが移動すると3、aIndex
を実行します.毎回1を追加し、arr
要素を取ります.ランダムに取って、リスニングの外に置くこともできます.そうしないと、毎回0を置くことになります.「民主」4、document.createElement()
を使用してdiv
要素を作成し、document.createTextNode()
を使用して新しいテキストノードを作成します.パラメータは挿入するテキストです.その後、div
にテキストノードを挿入し、div
をbody
に挿入します.その後、sTxt
をdiv
に挿入します.その後、いくつかのスタイルの修正を行います.またzIndex
は積み重ね順を示しており、大きくなればなるほど前の6に、タイマーも設置されている.上のように書かないで、上はただスタイル9を書いて、クリックできないように設定して、このようにクリックを妨げないで、自分でプラスします