2012-08-14 111 views
3

现在,我使用这个JavaScript代码我可以通过JavaScript动态添加鼠标光标旁边的文本吗?

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

及以下CSS

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

现在我要新增一些文字光标变过光标图像是否所有Ajax是一个过程。当ajax完成时将其删除。没有使用任何jQuery插件,这怎么可能?

+5

*“这是可能的吗?” - 是的,因为一块JS代码不必是jQuery插件。 – Joseph 2012-08-14 02:11:21

+0

好的:-),'怎么做'? – Radek 2012-08-14 02:19:01

回答

4

试试这个:

与演示开始/停止功能和更改文本

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

+0

如何停止/删除文本?点击“停止”对我不起作用。你为什么使用settimeout? – Radek 2012-08-14 02:54:10

+0

这是'移动'点...仍然无法阻止它。 – Radek 2012-08-14 03:07:51

+0

您错过了stopLoadingBM()函数中的$(“#besideMouse”)。html(“”)''。 – Radek 2012-08-14 03:40:11

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/

1

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';