这篇文章主要为大家详细介绍了 JavaScript 鼠标特效, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
实例一:禁用鼠标右键
- <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>
来源: http://www.phperz.com/article/17/0512/331890.html