1

視差効果を作成しようとしていますが (うまくいきます)、小さな問題があります。要素の現在の位置から相対的な視差ではなく、0 にジャンプします。どのように視差を現在の位置に対する相対的な位置に影響させることができますか?

これが私のJavaScriptです：

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var alreadyY = $("#caveConfron").css("backgroundPositionY");

    $("#caveConfron").css({"backgroundPosition":-(x/85)+"% 0%"});
});

そして要素の私のCSS：

#caveConfron{
    width:242px;
    height:344px;
    border:5px solid black;
    background:url('../img/caveConfrontBg.jpg') no-repeat center top;
    position:relative;
}

何が起こるかの例を次に示します: http://jsfiddle.net/gNCjS/

4

1 に答える 1

0

多くの実験の後、私は問題を理解しました。

何よりもまず、マウスが div の中心に当たったとき、x のマウス位置の値は「0」でなければなりません。だから、これは私がCSSを微調整せずに行ったことです:

$("#caveConfron").mousemove(function(e){
    var x = e.pageX - this.offsetLeft;

    var reduce = $(this).width()/2;

    $("#caveConfron").css({"backgroundPosition":(((-x+reduce)/55)+50)+"% 0%"});
});

変数reduceは、div の幅の半分を取得します。次に、変数の負のx値を の値に追加しながら取得しますreduce。x のマウス位置が div の半分を超えると正になるため、中央は常に「0」になります。次に、55 を割って、x 軸上を移動するときに散発的にジャンプしないようにします。これは小さな変化です (ジャンプをもっと大きくしたい場合は、この値を自由に微調整してください。私の目的では素晴らしかったです)。その上に 50 を追加します。これは、元の CSS では背景の位置が中央に配置されているため、偶然にも (数値で) 値が 50% になるためです。

私の説明が良かったと思います！

于 2013-05-26T23:35:12.643 に答える