webフロントエンド実験一:Jsキャプチャマウスイベントを利用して、写真の切り替えを実現する.

1186 ワード
多くの場合、webをする時、頭が痛いのは機能の実現ではなくて、フロントのインターフェイスです.javascriptを利用してマウスを捕獲することについての実験を紹介します.
実験の目的:マウスがあるピクチャーを指す時、このピクチャーを指定のピクチャーに変えて、離れる時もとのピクチャーに返答します.
実験用途:webナビゲーションを作り、ある機能を強調する時によく使われます.
 
ソースを直接添付します.とても簡単です.
<head>
<title>      </title>
<SCRIPT LANGUAGE="JavaScript">
    function changeSrc(obj) {
        obj.src = "img/LOGO1.gif"; //      
    }
    function changeSrc2(obj) {
        obj.src = "img/LOGO2.gif"; //      
    }
</script>
</head>
<body>
<img  onMouseOver="changeSrc2(this)"  onMouseOut="changeSrc(this)" src="img/LOGO1.gif" />
</body>
</html>
 
上記のコードをコピーしてもいいですが、画像は自分で探しなければなりません.コードは多くなくて、分析が難しいです.
原理はウェブページに画像を追加し、デフォルトはlogo 1.gifで、マウスが画像に移動するとlogo 2.gifに切り替わり、マウスが離れるとlogo 1.gifに戻ります.
 
知識点:webページでのマウスイベント
onclick              :    マウスクリック時にこのイベントを有効にします.         :    マウスをダブルクリックした時にこのイベントを起動します.  :   マウスを押すとこのイベントを開始します.       :   マウスを押してマウスを離すとこのイベントを有効にします.    :   マウスがオブジェクトの範囲の上に移動したときにこのイベントを有効にします.  :   マウス移動時にこのイベントを有効にします.      :   マウスがオブジェクトの範囲から離れると、このイベントを起動します.
JSコード復号