1. 程式人生 > >javascript網頁特效——滑鼠特效

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>