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 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
js操作二进制数据方法
Mar 03 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 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用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python 错误和异常小结
2013/10/09 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
python实现简单的tcp 文件下载
2020/09/16 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
信息管理专业推荐信
2013/10/29 职场文书
有关打架的检讨书
2014/01/25 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
高中生军训感言
2015/08/01 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript