卵のないマウスの騒ぎの特効

1809 ワード

以前、ある兄のブログを見て、マウスが移動すると、後ろに小さなしっぽがついてきて、富強、民主などがあったので、自分でコードを書いて実現しようとしたので、私はオリジナルのjs実現方法を作りました.jQueryコードを使うともっと簡単で、私が書きたいです.特効www.sclifftop.comを見るには、chromeを使って閲覧するのが効果的で、携帯電話を使うとクリックする時だけ出てきます
先着コード


(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にテキストノードを挿入し、divbodyに挿入します.その後、sTxtdivに挿入します.その後、いくつかのスタイルの修正を行います.またzIndexは積み重ね順を示しており、大きくなればなるほど前の6に、タイマーも設置されている.上のように書かないで、上はただスタイル9を書いて、クリックできないように設定して、このようにクリックを妨げないで、自分でプラスします