0

当光标位于顶部或底部（向上或向下滚动）时，我有一个 div 滚动内容。我有两个自定义的光标图像——一个应该在 div 内容向上滚动时显示，另一个应该在 div 内容向下滚动时显示。下面的脚本由 stackoverflow 成员编写，仅在使用标准光标样式（如等待、指针等）时有效。我想使用图像，但无法使其正常工作。我也不需要下面脚本中的计时器。

 <script type='text/javascript' >
 var top=0, timer;

 $('#repertoirescroll').on('scroll', function() {
 clearTimeout(timer);
 var scrollTop = $(this).scrollTop(),
    cursor = scrollTop > top ? 'pointer' : 'wait';
 $('body').css('cursor', cursor);
 top = scrollTop;
 timer = setTimeout(function() {
    $('body').css('cursor', 'default');
 }, 500);
 });​

 </script>

我使用的图像名称是

 url(../images/arrowup.png)
 url(../images/arrowdown.png)

*HTML/CSS**

 .cursorup {
  cursor: url(../images/arrowup.png), auto;
  position:relative;

 }

 .cursordown {
  cursor: url(../images/arrowdown.png), auto;
  position:relative;

 }

滚动内容

感谢您提前提供任何帮助。

4

1 回答 1

1

要使用自定义光标，请使用 CSS 样式：

.curarrowup {
    cursor: url(../images/arrowup.png), auto;
}

然后应用，使用 jQuery 应用样式：

$(myElement).addClass("curarrowup");

当您想返回到普通光标时：

$(myElement).removeClass("curarrowup");

在您的示例中使用 $('body') (myElement === 'body') 很好。

一个警告：在 Firefox 中，新光标通常在您实际移动鼠标之前不会出现。这是一个已知的错误，我找不到任何解决方法。

编辑：修改您的代码：

var top=0, timer;

$('#repertoirescroll').on('scroll', function() {
    var scrollTop, cursor;

    clearTimeout(timer);
    scrollTop = $(this).scrollTop();
    cursor = scrollTop > top ? 'curarrowup' : 'curarrowdown';
    $('body').addClass(cursor);
    top = scrollTop;
    timer = setTimeout(function() {
        $('body').removeclass(cursor);
    }, 500);
});​
于 2012-09-13T15:56:48.067 回答