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 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
Vue实现多标签选择器
Nov 28 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
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
微博短链接算法php版本实现代码
2012/09/15 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php调用shell的方法
2014/11/05 PHP
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
Js组件的一些写法
2010/09/10 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
Puppet的一些技巧
2018/09/17 Javascript
详解小程序rich-text对富文本支持方案
2018/11/28 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
python操作excel的方法
2018/08/16 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python实现对变位词的判断方法
2020/04/05 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
大学生关于奋斗的演讲稿
2014/01/09 职场文书
人力资源主管职责范本
2014/03/05 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript
手写实现JS中的new
2021/11/07 Javascript
Java 死锁解决方案
2022/05/11 Java/Android