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>