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怎么实现网页鼠标特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。