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

イベントDOC：http ://api.jquery.com/mousemove/ </ p>

デモ：http：//jsfiddle.net/RGNCq/1/

于 2012-08-14T02:31:30.257 に答える