JavaScript + Ajax 実践サンプル集

カーソルテキスト

説明補足説明コード分割コードコメント投稿

このサンプルは、カーソルの右下にテキスト文字を表示します。カーソルを移動するテキスト文字を移動します。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**********************************************************************
* universaldom.js - universal dom (標準DOMスクリプティングから流用）
***********************************************************************/

var universal = new Object();
universal.dom = new Object();

universal.dom.addEventListener = function(elm, type, func, useCapture) {
  if(! elm) { return false; }
  if(! useCapture) {
    useCapture = false;
  }
  if(elm.addEventListener) {
    elm.addEventListener(type, func, false);
  } else if(elm.attachEvent) {
    elm.attachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.removeEventListener = function(elm, type, func, useCapture) {
  if(! elm) { return false; }
  if(! useCapture) {
    useCapture = false;
  }
  if(elm.removeEventListener) {
    elem.removeEventListener(type, func, false);
  } else if(elm.detachEvent) {
    elm.detachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.target = function(evt) {
  if(evt && evt.target) {
    if(evt.target.nodeType == 3) {
      return evt.target.parentNode;
    } else {
      return evt.target;
    }
  } else if(window.event && window.event.srcElement) {
    return window.event.srcElement;
  } else {
    return null;
  }
};

universal.dom.preventDefault = function(evt) {
  if(evt && evt.preventDefault) {
    evt.preventDefault();
    evt.currentTarget['on'+evt.type] = function() {return false;};
  } else if(window.event) {
    window.event.returnValue = false;
  }
};

universal.dom.stopPropagation = function(evt) {
  if(evt && evt.stopPropagation) {
    evt.stopPropagation();
  } else if(window.event) {
    window.event.cancelBubble = true;
  }
};

universal.dom.dispatchEvent = function(elm, evttype) {
  if(elm.dispatchEvent) {
    var evt = document.createEvent('MouseEvents');
    evt.initEvent(evttype, true, true);
    elm.dispatchEvent(evt);
  } else if(window.event) {
    var evt = document.createEventObject();
    evt.button = 1;
    elm.fireEvent('on'+evttype, evt);
  }
}

このサンプルは、カーソルの右下にテキスト文字を表示します。カーソルを移動するテキスト文字を移動します。

このサンプルを編集して試してみる!

カーソルに表示するテキスト文字は<span>タグに宣言しています。カーソルを追跡するには、BODY要素にonmousemoveイベントハンドラを登録します。カーソルの位置は、イベントハンドラの引数(evt)のclientX、clinetYプロパティに格納されています。

function initDoc() {
  universal.dom.addEventListener(
   document.body,"mousemove",cursor,false);
}

function cursor(evt) {
  trail.style.visibility = "visible";
  trail.style.position = "absolute";
  trail.style.left = evt.clientX + 10;
  trail.style.top = evt.clientY;  
}

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

カーソルテキスト