3

こんにちは、私はこのスニペットhttp://jsfiddle.net/arobichaux/Qbrv9/29/に取り組んでおり、基本的にいくつかの問題を抱えています。

まず、写真の先頭を超えないようにしたい (左にスクロールしない: 0px;) また、ライブでのマウスの動きの長さを確認する良い方法は何か疑問に思っています。領域はそれらを画像の最後までずっと連れて行きますか? 画像の幅は 5464px です。

助言がありますか？ありがとう！

var strength1 = 1000;
var strength2 = 2000;
var strength3 = 5000;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 15);
    var pageY = e.pageY - ($(window).height() / 1);
    var newvalueX = 2* pageX * -1;
    var newvalueY = 1* pageY * -1;
  $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(1  / $(window).height() * pageY * -1)+"px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(1 / $(window).height() * pageY * -1)+"px");
});
4

1 に答える 1

2

jsFiddle デモ

まず、初めてのユーザーにとって非常に良い質問です。フィドルはよく提示されており、視差は時間ごとに人気が高まり、関連性が高まっていると思います。

私が対処する 2 つの問題がありますが、私の意見では、それらはマイナーです (あなたのコードはかなりうまく機能します - よくできました)。

過去へのスクロールなし left:0px;

これは簡単です。計算後にチェックを変更し、pageX0 未満の場合は 0 に設定するだけです。かなり単純な衝突検出です。

var pageX = e.pageX - ($(window).width() / 15);
if( pageX < 0 ) pageX = 0;

画像の最後までずっと連れて行ってください

この問題は、領域の幅を画像の幅よりも小さく設定したために発生します。特に、あなたのフィドルリストはstrength3 = 5000そうあるべきですが

var strength3 = 5464;
于 2013-04-02T19:11:05.840 に答える