2

こんにちは

だから私は魔女がこれを行ういくつかの関数を書き始めました（マウスをdivに近づけると、divはマウス位置に近づきますon parent X axsis、最大div位置はleft:-40%、最小はですleft: -80%）：

注：黒い矢印はカーソル（マウスの位置）です

  1. リスト項目
  2. リスト項目
  3. リスト項目

コード

HTMLマークアップ:

<div class="wraper">
    <div class="ls">
        <div class="ldiv">
        </div>
    </div>
    <div class="c">
        <div class="coordinates">
        </div>
        <div class="cdiv">
        </div>
    </div>
    <div class="rs">
        <div class="rdiv">
        </div>
    </div>
</div>

CSSマークアップ:

body{
    margin: 0;
    padding: 0;
}
.wraper{
    width: 100%;
    height: 500px;
}
.ls, .rs{
    position: relative;
    float: left;
    width: 30%;
    height: 100%;
    background-color: #eeeeee;
}
.c{
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
    background-color: #dddddd;
}
.cdiv{
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 50%;
    background-color: red;
}

.ldiv{
    position: absolute;
    top: 30%;
    left: -80%;
    width: 80%;
    height: 40%;
    background-color: red;
}
.rdiv{
    position: absolute;
    top: 30%;
    right: -40%;
    width: 80%;
    height: 40%;
    background-color: red;
}

Javacsriptマークアップ:

//ASsign global variables
var mouseX = 0;
var newTop = 0;

$("div.ls").mousemove(function(event) {
    // Get parrent offset
    var parentOffset = $(this).offset();
    // Get child division offset
    var division = $(".ldiv").offset();
    // Calculate mouse position inside left division
    var relX = event.pageX - parentOffset.left;
    var relY = event.pageY - parentOffset.top;
    // Check if mouse changed its position
    if (mouseX != relX){
        // Get new position of x axis
        var newPosX = $(this).width() - relX - 161;
        // Get new height of child element in percentage
        var newHeight = 100 * parseFloat($(".ldiv").height()) / parseFloat($(this).height());
        // Display important stuff
        $(".coordinates").text("Mouse position = X:" + relX + " Y:" + relY + "Div offset = X:" + division.left + " Y:" + division.top  + " Width = " + $(this).width()+" newHJeight = "+newHeight);
        //If mouse moves left
        if (mouseX > relX) {
            // Cant go lower then 0.2 because javascript is rounding it down
            newHeight += 0.2;
            // calculate new top so division stays in middle of parent
            newTop = (100 - newHeight) / 2;
            // Assign new css
            $(".ldiv").css({
                left: newPosX + "px",
                height: newHeight + "%",
                top: newTop + "%"
            });
        } 
        //If mouse moves right
        else {
            newHeight -= 0.2;
            newTop = (100 - newHeight) / 2;
            $(".ldiv").css({
                left: newPosX + "px",
                height: newHeight + "%",
                top: newTop + "%"
            });
        }
        // Record mouse position
        mouseX = relX;
    }
});

</p>

これはjsFiddleのライブ例です

やりたいこと：

  1. このコードを書き直して、アニメーションのように動作し、マウスを速く動かしても順序が狂わないようにするにはどうすればよいですか?

</p>

4

1 に答える 1

0

私は mousemove に依存せず、代わりに requestAnimationFrame [または単純な setTimeout] を使用します。そうすれば、CPU の負荷が大幅に軽減され、アニメーションがよりスムーズになります。

于 2012-07-26T17:00:52.540 に答える