6

マウスの位置に基づいてボックスベースのサイズを変更しようとして、jsfiddleをいじっていました。マウスが遠ざかるにつれてボックスを大きくするのは簡単です。距離を取得するだけです。しかし、私は反対のことをしたいです。マウスが近づくとボックスのサイズが大きくなり、マウスが離れるとサイズが小さくなります。このための式を考え出すことができませんでした。私が見逃している本当に単純なものがあるかもしれないと感じています。

<div id="box"></div>

#box { height: 100px; width: 100px; background: black; }

var box = document.getElementById('box');

// center point of the box
var boxX = 50;
var boxY = 50;

document.addEventListener('mousemove', function(e) {
    var x = e.pageX,
        y = e.pageY;

    var dx = x - boxX,
        dy = y - boxY;

    var distance = Math.sqrt(dx *dx + dy * dy);

    box.style.width = box.style.height = distance + 'px';

}, false);

フィドルへのリンクは次のとおりです。 http://jsfiddle.net/gSDPq/

どんな助けでも大歓迎です、ありがとう

4

3 に答える 3

7

試すdistance = Math.max(0,200-Math.sqrt(dx*dx + dy*dy));

これにより、マウスが 200px 以上離れるとボックスが消え、中央に近づくにつれてサイズが 200px まで着実に大きくなります。必要に応じて数値を調整します (たとえば、Math.sqrt()パーツを 2 で割って距離の影響を減らすか、を調整し200て最大サイズに影響を与えます)。

于 2013-04-25T22:32:46.967 に答える
1

Kolinkの答えが実際にあなたがやりたいことをしたかどうかはわかりません. マウスがボックスに近づいたときにボックスを大きくしたいようです。

xと の両方をboxX、定義済みのボックス サイズの値から差し引くだけで、次のようになります。

var dx = 400 - x - boxX,
    dy = 400 - y - boxY;
if(dx<0) dx = 0;
if(dy<0) dy = 0;

http://jsfiddle.net/gSDPq/3/

于 2013-04-25T22:43:41.430 に答える
1

jsfiddle 

var box = document.getElementById('box');  
// center point of the box
var boxX = 50;
var boxY = 50;
var ux=500, uy=500;// 1.stage
document.addEventListener('mousemove', function(e) {
    var x = e.pageX,
        y = e.pageY;

    var dx = ux-(x - boxX),
        dy = uy-(y - boxY);// 2.stage

    var distance = Math.sqrt(dx *dx + dy * dy);

    box.style.width = box.style.height = distance + 'px';

}, false);
于 2013-04-25T22:40:44.717 に答える