jQueryを使用してマウスの位置に追従するカスタムsvg #cursorを作成しました（cssを使用してカーソルを置き換えると、画像サイズが32pxに制限され、私はjQueryを使うことにこだわりたい）。div（jQuery）でマウスの位置に従う - スクロール時に問題が発生する
問題：ときに、ユーザーがスクロール、カーソルがぎくしゃくした効果を作成する移動しません：https://jsfiddle.net/jhhbrook/ucuLefut/
私は私のSVGカーソルがスムーズにフォローしたいです。これどうやってするの？
$(document).mousemove(function(e){
$("#cursor").css({left:e.pageX, top:e.pageY});
なぜ活用CSSのcursorプロパティ自体の.as私はそれが任意のマウスイベントせずにカーソル位置を取得することは不可能です知っているこれまでのように
body {
cursor:url(http://mayadufeu.github.io/img/cursor-auto.svg), auto;
}
https://jsfiddle.net/0chzmhrd/
UPDATE：？I以下のコードを使用してマウス座標を得ることはできると思うが、スクロールイベントが連続した値ではなくステップで位置を更新するので、どのようにカーソルをうまくアニメートするかの手がかりがない。
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
body {cursor:none;}
#content {height: 1200px;}
#cursor {position: absolute;}
#counter {position:fixed;margin:1px 0px 0px 100px;}
</style>
</head>
<body>
<p id="counter">counter</p>
<img id="cursor" src="http://mayadufeu.github.io/img/cursor-auto.svg"/>
<div id="content">
content
</div>
</body>
<script type="text/javascript">
var a;var b;
$(document).ready(function(){
$(document).mousemove(function(e){
a = e.pageX;
b = e.pageY;
});
$(document).mousemove(function(e){
$("#cursor").css({left:e.pageX, top:e.pageY});
$('#counter').text('Mouse -> X : '+a+ ' ' + 'Y: '+b);
});
$(document).scroll(function (e) {
$('#counter').text('Mouse -> X : '+a+ ' ' + 'Y: '+b);
//can animate here
});
});
</script>
</html>
残念ながら、JSfiddle idkで実行されない理由は、HTMLファイルで試してみてください。
提案してくれてありがとうございますが、私がポストで述べたように、cssを使ってカーソルを置き換えることは、jQueryオプションと比較して網膜ディスプレイでピクセル化されています – hugostacks