欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

自定义鼠标样式

程序员文章站 2022-03-10 15:48:34
...
IE版本处理 写道
http://blog.csdn.net/plpyxx/article/details/5586853
 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .left {
            cursor: url('http://webmap0.map.bdimg.com/image/api/openhand.cur'), crosshair;

        }
        .right {
            cursor: url('http://webmap0.map.bdimg.com/image/api/closedhand.cur'), crosshair;
        }
        span{
            cursor: help;;

        }


    </style>
    <script type="text/javascript">

        /**
         * 鼠标做点按下改变鼠标样式,为自定义鼠标样式
         * */
       document.onmousedown = function(e){
          var val =  e.button;
           if (val == 0) {
               var bod = document.body;
               bod.className = 'right';
               //alert('left key');
           } else {
               //alert('right key');
           }
       };

        /**
         * 该表鼠标左键弹起,恢复鼠标样式
         * */
        document.onmouseup = function(e){
            var bod = document.body;
            bod.className = 'left';
        };

      /**
       * 屏蔽鼠标左键
       * @returns {boolean}
       */
        document.oncontextmenu = function(){
            return false;
        };
    </script>
</head>
<body style="width:100%;height: 100%;border: 10px solid gray;min-height: 400px;padding: 0;margin: 0;" class="left">
        <span>asfasdfasdf</span>
        <span> adsfasdds</span>
</body>
</html>

 

相关标签: cursor