1

私はこのjQueryプラグインを持っています - Plax: https://github.com/cameronmcefee/plax

私はそれをレスポンシブにしたかったのですが、それは私が部分的に持っているものです: http://jsfiddle.net/4kRDL/

私の問題はhtml属性です:

<img src="/parallax/4.svg" data-xrange="20" data-yrange="10" id="plax-img4"/>
    <img src="/parallax/3.svg" data-xrange="5" data-yrange="40" id="plax-img3"/>

問題は、data-xrangeとdata-yrangeが応答しないことです。ブラウザ ウィンドウを最小化すると、ウィンドウのサイズに関係なく、同じ x 範囲と y 範囲になります。最小化すると、範囲が広すぎます。

したがって、ウィンドウのサイズを変更するときにウィンドウのサイズを取得し、アルゴリズムで xrange と yrange を見つけ、jquery で属性を変更してから、plaxify を再初期化する必要があります。

私はこの疑似コードのようなものを考えていましたが、それを行う方法がわからないので動作します:

$('#my-element')
    .attr('data-xrange', 'New Value')
    .attr('data-yrange', 'New Value');

// You can dynamically redefine the range of a layer
// by running plaxify() on it again.
$('#my-element').plaxify();

$(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && #my-element.is('New Value')) {
                    #my-element.removeAttr('data-xrange,data-yrange');
                }
            });
4

1 に答える 1

0

それはPlaxのドキュメントからのものです：

$('#plax-octocat').plaxify({"xRange":40,"yRange":40})
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true})

$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true})
$.plax.enable()

$('#my-btn').click(function(){
  // bigger range
  $('#plax-octocat').plaxify({"xRange":200,"yRange":200}) // LOOK HERE
})

ご覧のとおり、新しい xrange と yrange が必要な場合は、自分で設定する必要があります。次に、コードは次のようになります。

$(window).resize(function(){
    var w = $(window).width();
    if(w > 320){
       $('#my-element').plaxify({"xRange":newValue,"yRange":newValue});
    }
});

編集: また、データ属性を変更した後、plaxify()CSS の上部と左側の値を 0 に設定する必要があります。そのようなもの: http://jsfiddle.net/instead/4kRDL/14/

于 2013-05-20T19:04:10.307 に答える