1

ドキュメント/カーソルの「マップの概要」を作成しようとしていますが、計算に固執しました。ポインタはまだ概要ボックスを超えています。

これが私がこれまでにしたことです：

var box = $('#box'),
    pointer = box.find('i');

$(window).on('mousemove', function(e) {

    var pageX = e.clientX,
        pageY = e.clientY,
        winW = $(this).width(),
        winH = $(this).height(),
        percentX = 100 * pageX / winW,
        percentY = 100 * pageY / winH;

    pointer.css({
        top: percentY + '%',
        left: percentX + '%'
    });

});

パーセンテージを使用するのは最善の方法ではありませんが、正しい寸法を計算する方法がわかりません...それを改善するための提案はありますか？

4

1 に答える 1

0

カーソルは常にボックスの境界と重なるため、

a）定義された幅>1

b）実際の位置の右下に配置して、右と下に重なるようにします。

c）ボックスのオーバーフローを非表示に設定する必要があります。

例を参照してください：http：//jsfiddle.net/8jJNV/7

編集：jsfiddleの最新の変更に適応

CSS：

#box {
   position: fixed;
   bottom:0;
   left:0;
   width: 180px;
   height: 180px;
   background: #aaa;
   overflow: hidden;
}

jQuery：

$(window).on('mousemove', function(e) {

   var pageX = e.clientX;
   var pageY = e.clientY;
   var winW = $(this).width();
   var winH = $(this).height();

   if(pageX > winW-5) pageX = winW-5; // deal with scrollbar

   var boxWidth = 172;
   var boxHeight = 172;

   var posX = pageX / winW * boxWidth;
   var posY = pageY / winH * boxHeight;

   pointer.css({
      top: posY + 'px',
      left: posX + 'px'
   });

});
于 2012-12-18T13:09:40.960 に答える