Question

我希望我的网站上有一些跟随鼠标的东西，有点像Windows 7的功能。

就像在Windows 7中加载某些内容时，会出现一个小圆圈并跟随鼠标。

我正在使用jQuery库，所以我知道我可以使用Ajax Start和Stop来使它出现，但我不知道如何使它跟随鼠标。

要执行此操作的任何插件或如何执行此操作？

Answer 1

这个问题已在这里得到解答：jQuery tooltip follow mouse

但是，由于在该过程中进行了大量计算，该解决方案可能会降低用户的浏览器速度。我建议你在CSS中使用这个技巧来改变浏览器的光标：

cursor : url("custom.cur");

Answer 2

只需将光标更改为标准OS“等待”光标之一即可。 http://www.quirksmode.org/css/cursor.html具有良好的选项和浏览器兼容性网格。将鼠标悬停在网格中的光标名称上以查看浏览器中的示例。

看起来你可能想要进度光标。

mystyle { cursor: progress; }

Answer 3

我想我会在这个答案中添加一些内容。我对答案的补充实际上并没有涵盖如何使用JQuery来做到这一点。相反，它涵盖了如何使用ASP.NET Ajax框架。如果您的页面（或MasterPage）上有ScriptManager，则此框架将自动成为页面的一部分。此框架是UpdatePanels和其他Ajax Server控件使用的框架。

PageRequestManager Class管理部分页面更新（ajax请求）。您可以使用此类来实现在发生与ajax请求有关时应执行的方法（如ajax请求开始或结束，或者在发出ajax请求时发生错误）。

因此，要使用Ajax.NET框架而不是JQuery实现此解决方案，请获取对PageRequestManager的引用，并实现在PageRequestManager的beginRequest和endRequest事件期间执行的方法，以更改页面的光标样式：

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(endRequestEventHandler);
    prm.add_beginRequest(beginRequestEventHandler);

    function beginRequestEventHandler() {
        var bodyElement = document.getElementsByTagName("body")[0];
        bodyElement.style.cursor = "wait";
    }
    function endRequestEventHandler() {
        var bodyElement = document.getElementsByTagName("body")[0];
        bodyElement.style.cursor = "default";
    }    
</script>

这很简单。当页面向服务器发出Ajax请求时，会发生PageRequestManager的“beginRequest”事件，并且您的方法将光标更改为“等待”光标（默认情况下，我认为这是Vista中的圆形内容，但我不确定并且可以'测试它，因为我现在正在使用XP）。

当Ajax请求返回浏览器时，会发生PageRequestManager的endRequest事件，并且您的方法将光标更改回“default”。

用户必须做的唯一事情就是移动鼠标（然后应用样式）。当我测试上面的代码时，至少我在FireFox中注意到了这种行为。

快乐编码

-Frinny

Answer 4

我宁愿这样做更优雅：

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

CSS：

html.busy, html.busy * {  
  cursor: wait !important;  
}

来源：http://postpostmodern.com/instructional/global-ajax-cursor-change/

Answer 5

你的意思是鼠标吗？

如果是这样，你可以通过DHTML来做到这一点。 Click Here代表了一个很好的例子。

如何使Ajax加载器跟随鼠标？

5 个答案: