更改光标的外观

Question

我正在制作在线刮刮卡，我需要知道如何将光标变成硬币。

这是我已经尝试过的代码示例：

    <div id="krasvak" class="scratchpad"></div>
  <style>
    #krasvak {
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>
  <script type="text/javascript" src="wScratchPad.js"></script>
  <script type="text/javascript">

    $('#krasvak').wScratchPad({
      cursor: 'cursor: url("images/muntje.png"), auto;',
      scratchMove: function (e, percent) {
        console.log(percent);
        if (percent > 70)
        {
            this.clear();
            window.alert("U heeft uw code gekrast");
            window.location.href='compleet.php';
        }
      }
    });
    $('#krasvak').wScratchPad('bg', 'images/slide1.png');
    $('#krasvak').wScratchPad('fg', 'images/overlay.png');
    $('#krasvak').wScratchPad('size', 10);
  </script>

这里是java脚本代码的一部分

    $.fn.wScratchPad.defaults = {
size        : 5,          // The size of the brush/scratch.
bg          : '#cacaca',  // Background (image path or hex color).
fg          : '#6699ff',  // Foreground (image path or hex color).
realtime    : true,       // Calculates percentage in realitime
scratchDown : null,       // Set scratchDown callback.
scratchUp   : null,       // Set scratchUp callback.
scratchMove : null,       // Set scratcMove callback.
cursor      : 'crosshair' // Set cursor.
};

如果有人可以帮助我，我真的很感激。

Answer 1

根据插件的github有一个解决方案：

---

即时更新

var sp = $("#elem").wScratchPad();

sp.wScratchPad('size', 5);
sp.wScratchPad('cursor', 'url("./cursors/coin.png") 5 5, default');

// Or directly with element.

$("#elem").wScratchPad('image', './images/winner.png');

---

所以试试这个：

<div id="krasvak" class="scratchpad"></div>
  <style>
    #krasvak {
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>
  <script type="text/javascript" src="wScratchPad.js"></script>
  <script type="text/javascript">

    $('#krasvak').wScratchPad({
      scratchMove: function (e, percent) {
        console.log(percent);
        if (percent > 70)
        {
            this.clear();
            window.alert("U heeft uw code gekrast");
            window.location.href='compleet.php';
        }
      }
    });
    $('#krasvak').wScratchPad('bg', 'images/slide1.png');
    $('#krasvak').wScratchPad('fg', 'images/overlay.png');
    $('#krasvak').wScratchPad('size', 10);
    $('#krasvak').wScratchPad('cursor', 'url("./images/muntje.png") 5 5, default');
  </script>

Answer 2

语法是

cursor:url(图片的网址)

我不推荐磁盘路径（它们甚至可能不起作用）。使用相对路径，即

../scratch代码/images/muntje.png

Answer 3

试试这个：

cursor: url("images/muntje.png"), auto;

确保图像目录的路径正确，相对于您的 CSS 文件所在的路径。

Answer 4

您好，请使用类似的路径

 cursor: url("/Bram/Bram/Scratch the code/images/muntje.png");

如果你想给出完整路径并在本地访问 html 文件

 cursor: url("file://C:/xampp/htdocs/Bram/Scratch the code/images/muntje.png");

Answer 5

把它放在 CSS 中，而不是 JavaScript 中。也许这行得通。

<div id="krasvak" class="scratchpad"></div>
  <style>
    #krasvak {
      cursor: url("images/muntje.png"), auto;
      width: 25%;
      height: 100px;
      border: solid 1px;
      display: inline-block;
    }
  </style>
  <script type="text/javascript" src="wScratchPad.js"></script>
  <script type="text/javascript">

    $('#krasvak').wScratchPad({
      scratchMove: function (e, percent) {
        console.log(percent);
        if (percent > 70)
        {
            this.clear();
            window.alert("U heeft uw code gekrast");
            window.location.href='compleet.php';
        }
      }
    });
    $('#krasvak').wScratchPad('bg', 'images/slide1.png');
    $('#krasvak').wScratchPad('fg', 'images/overlay.png');
    $('#krasvak').wScratchPad('size', 10);
  </script>