JS怎么实现网页鼠标特效

这篇“JS怎么实现网页鼠标特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“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>

以上就是关于“JS怎么实现网页鼠标特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。