8

现在，如果使用此 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 插件怎么可能？

4

3 回答 3

5

尝试这个：

具有启动/停止功能和更改文本的演示

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

于 2012-08-14T02:48:57.663 回答
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';
于 2012-08-14T02:44:11.803 回答
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');
    });
});

活动文档：http: //api.jquery.com/mousemove/ ​</p>

演示：http: //jsfiddle.net/RGNCq/1/

于 2012-08-14T02:31:30.257 回答