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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
javascript常用函数(2)
Nov 05 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JS实现网页时钟特效
Mar 25 Javascript
原生js实现照片墙效果
Oct 13 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 应用程序安全防范技术研究
2009/09/25 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JS面向对象编程实现的拖拽功能案例详解
2020/03/03 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python 求10个数的平均数实例
2019/12/16 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
给男朋友的道歉信
2014/01/12 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
丧事答谢词
2015/01/05 职场文书
2015年团支书工作总结
2015/04/03 职场文书
2016小学新学期寄语
2015/12/04 职场文书