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 contains过滤器实现精确匹配使用方法
Apr 12 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
javascript动画算法实例分析
Jul 31 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
Angular工具方法学习
Dec 26 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
vue动态设置页面title的方法实例
Aug 23 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
初识Javascript小结
2015/07/16 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
EsLint入门学习教程
2017/02/17 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vue中的scope使用详解
2017/10/29 Javascript
简述JS控制台的使用
2018/07/15 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
python实现红包裂变算法
2016/02/16 Python
python操作 hbase 数据的方法
2016/12/18 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python continue继续循环用法总结
2018/06/10 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
工程承包协议书
2014/10/20 职场文书
会计师事务所实习证明
2014/11/16 职场文书
瘦西湖导游词
2015/02/03 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS