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（图片的URL）

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

../抓取代码/ images / muntje.png

Answer 3

试试这个：

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

确保相对于CSS文件所在的路径，images目录的路径是正确的。

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>

更改光标的外观

5 个答案: