JavaScript鼠标特效大全


Posted in Javascript onSeptember 13, 2016

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
详解AngularJS中module模块的导入导出
Dec 10 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
javascript表单控件实例讲解
Sep 13 #Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 #Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 #Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 #Javascript
浅谈JS的基础类型与引用类型
Sep 13 #Javascript
You might like
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
特色蛋糕店创业计划书
2014/01/28 职场文书
万里长城导游词
2015/01/30 职场文书
体育教师研修感悟
2015/11/18 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS