源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript鼠标特效大全

  • 时间:2022-08-24 19:26 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript鼠标特效大全
本文实例为大家分享了js鼠标特效实例代码,供大家参考,具体内容如下 [b]实例一:[/b]禁用鼠标右键
<script type="text/javascript">
      //为文档的鼠标按下事件定义回调
      document.onmousedown = function(event){
        //判断事件的值是否为鼠标右键
        if (event.button == 2){
          alert('禁用鼠标右键!');  //提示用户禁用鼠标右键
        }
      }
    </script>
0 没按键 1 按左键 2 按右键 3 按左键和右键 4 按中间键 5 按左键和中间键 6 按右键和中间键 7 按所有的键  [b]实例二:[/b]动态定义鼠标指针形状
<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  [b] 实例三:[/b]鼠标进出时字体大小变化
<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>

[b]实例四:[/b]
<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>

[b]实例五:[/b]鼠标放上链接出现不同的颜色
<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>

[b]实例六:[/b]让鼠标滑轮失效
<script type="text/javascript">   
  function init(){
    //重新定义document的滑轮滑动的事件回调函数
    document.onmousewheel = function(){
      alert('禁止使用滑轮');  //提示用户不可以用滑轮
      return false;      //返回false,什么也不操作(这句不能少,否则还是会滚动)
    };
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部