javascript網頁特效——滑鼠特效

執行個體一：禁用滑鼠右鍵

<script type="text/javascript">            //為文檔的滑鼠按下事件定義回調            document.onmousedown = function(event){                //判斷事件的值是否為滑鼠右鍵                if (event.button == 2){                    alert('禁用滑鼠右鍵!');   //提示使用者禁用滑鼠右鍵                }            }        </script>

0 沒按鍵
1 按左鍵
2 按右鍵
3 按左鍵和右鍵
4 按中間鍵
5 按左鍵和中間鍵
6 按右鍵和中間鍵
7 按所有的鍵 執行個體二：動態定義滑鼠指標形狀

<script type="text/javascript">            //初始化滑鼠形狀            function initMouse(){                //通過標籤名得到目標DOM，如果是全網頁則這裡可以用body                var pDom = document.getElementsByTagName("p")[0];                //修改樣式的滑鼠指標形狀，pointer為手的形狀                pDom.style.cursor = 'pointer';            }                   </script>

名稱                   屬性代碼                 預設箭頭樣式           cursor:default 手型                   cursor: pointer    手型                   cursor:hand    移動十字箭頭           cursor: move   協助問號               cursor: help 十字准心                 cursor:crosshair   文字/編輯                cursor: text   無法釋放(禁用)             cursor:no-drop 禁用                   cursor:not-allowed 自動                   cursor:auto    處理中              cursor: progress   向上改變大小           cursor: n-resize   向下改變大小           cursor: s-resize   向左改變大小           cursor: w-resize   向右改變大小           cursor: e-resize   向上左改變大小          cursor: nw-resize  向下左改變大小          cursor: sw-resize  向上右改變大小          cursor: ne-resize  向下右改變大小          cursor: se-resize  

執行個體三：滑鼠進出時字型大小變化

<script type="text/javascript">    //滑鼠指標移進    function mOver(pDOM){        pDOM.style.fontSize = '20px';   //調整字型大小為20個像素    }       //滑鼠指標移出    function mOut(pDOM){        pDOM.style.fontSize = '';       //調整字型大小樣式為預設    }</script><!-- 定義一塊地區 -->        <p style="margin:5px auto; width:100px; height:100px; border:1px solid black;"             onmouseover="mOver(this);"  onmouseout="mOut(this);">            把滑鼠移動到該地區        </p>

執行個體四：

<script type="text/javascript">            var nowPos;                 //當前的位置            var myTimer;                    //定時器變數            function startIt(){             //開始函數                //開始定時器，以10毫秒為單位                myTimer = window.setInterval("scrollPage()",10);            }            //停止函數            function stopIt(){                //取消定時器                clearInterval(myTimer);            }            //滾動螢幕的函數            function scrollPage(){                window.scrollBy(0,1);   //以一個像素為單位開始滾屏            }            document.onmousedown = stopIt;  //監聽單擊事件            document.ondblclick = startIt;      //監聽雙擊事件</script>

執行個體五：滑鼠放上連結出現不同的顏色

<script type="text/javascript">             //定義連結的mouseover事件    function defineLinkColor(){        //獲得網頁裡所有的連結的DOM        var linkDOMs = document.getElementsByTagName("a");        //遍曆所有的連結DOM        for(var i=0; i<linkDOMs.length; i++){            //為每一個連結的mouseover定義事件回調            linkDOMs[i].onmouseover = function(){                this.style.color = 'red'; //為當前的連結改變顏色樣式            }            linkDOMs[i].onmouseout = function(){                this.style.color = '';      //恢複預設            }        }    }</script>

執行個體六：讓滑鼠滑輪失效

<script type="text/javascript">         function init(){        //重新定義document的滑輪滑動的事件回呼函數        document.onmousewheel = function(){            alert('禁止使用滑輪');    //提示使用者不可以用滑輪            return false;           //返回false，什麼也不操作(這句不能少，否則還是會滾動)        };    }</script>