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 相关文章推荐
裁剪字符串trim()自定义改进版
Apr 10 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
vue实现验证用户名是否可用
Jan 20 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
Js 中debug方式
2010/02/07 Javascript
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
在Python下尝试多线程编程
2015/04/28 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python 画二维、三维点之间的线段实现方法
2019/07/07 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
酒店副总经理岗位职责范本
2014/02/04 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
安全生产工作汇报
2014/10/28 职场文书
2014年宣传工作总结
2014/11/18 职场文书
小学科学教学计划
2015/01/21 职场文书
汽车销售合同文本
2019/08/08 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS