Question

现在，如果使用此javascript代码

的任何ajax，我更改了光标图像

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

以下css

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

现在我想在光标旁边添加一些文字。并在ajax完成时删除它。如果不使用任何jQuery插件，这怎么可能？

Answer 1

试试这个：

使用开始/停止功能和更改文本进行演示

http://jsfiddle.net/SY4mv/18/

Answer 2

CSS：

#tooltip {
    position: fixed;
    background-color: black;
    color: white;
    padding: 2px;
    opacity: 0;
    -webkit-border-radius: 3px;    
    border-radius: 3px;
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

html.busy #tooltip { opacity: 1 }

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

HTML：

<div id="tooltip">Message</div>

JS：

$(function() {
    $("html").bind("ajaxStart", function() {
        $(this).addClass('busy');
        $(this).bind('mousemove', function(event) {
            $('#tooltip').css({
                top: event.pageY - $('#tooltip').height() - 5,
                left: event.pageX
            });
        });
    }).bind("ajaxStop", function() {
        $(this).removeClass('busy');
        $(this).unbind('mousemove');
    });
});

活动DOC：http://api.jquery.com/mousemove/

DEMO：http://jsfiddle.net/RGNCq/1/

Answer 3

请参阅http://jsfiddle.net/PbAjt/show/：

CSS：

#cursorText{
    position:absolute;
    border:1px solid blue; /* You can remove it*/
}

JavaScript的：

document.body.onmousemove=moveCursor;
var curTxt=document.createElement('div');
curTxt.id="cursorText";
curTxt.innerHTML="Hello!"; /* Or whatever you want */
document.body.appendChild(curTxt);
var curTxtLen=[curTxt.offsetWidth,curTxt.offsetHeight];
function moveCursor(e){
    if(!e){e=window.event;}
    curTxt.style.left=e.clientX-curTxtLen[0]+'px';
    curTxt.style.top=e.clientY-curTxtLen[1]+'px';
}

根据您的需要，您可以更改

curTxt.style.left=e.clientX-curTxtLen[0]+'px';

到

curTxt.style.left=e.clientX+'px';

和

curTxt.style.top=e.clientY-curTxtLen[1]+'px';

到

curTxt.style.top=e.clientY+'px';

我可以通过javascript动态添加鼠标光标旁边的文本吗？

3 个答案: