DIV CSS 佈局教程網

本文實例為大家分享了js鼠標特效實例代碼，供大家參考，具體內容如下

實例一：禁用鼠標右鍵

<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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。