4

私はJavascriptとJqueryが初めてで、ブラウザウィンドウ内でマウスが移動したときにCSSの「変換」値を変更して画像のパースペクティブを変更するスクリプトを書いています。

すべてがうまくいっています！javascript/jquery を合理化してコードの量を削減し (-webkit- -moz- -ms- などを対象とする CSS であるため)、スクリプトの微調整も容易にしたいだけです。

わかりましたので、ここに私が合理化したい部分があります：

$('#logo').css({

'-webkit-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  '-moz-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  '-ms-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  'transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  });

中央の 4 つのセクションのそれぞれにある唯一のバリエーションは、CSS ブラウザー固有の要素 (-webkit-、-moz- など) だけであることがわかるので、当然、これらのバリエーションのそれぞれを含む配列を作成し、ループスルーしたいと考えています。バリエーション。

これは、JavaScript「for」を使用してループする最初の試みです。

var browserTransitionCSS = [
    '-webkit-transition',
    '-moz-transition',
    '-ms-transition',
    'transition'
    ];


   for(var i=0; i < browserTransformCSS.length; i++) 
            {
$('#logo').css({
browserTransformCSS: 
     "rotateY("
     + (e.pageX-(current_width/2))/150 + 
     "deg) rotateX("
      + (e.pageY-(e.pageY*2-600)-(current_height/2))/200 + 
     "deg)", 
  });
};

これは、Jquery "each" を使用してループする 2 回目の試みです。

var browserTransitionCSS = [
    '-webkit-transition',
    '-moz-transition',
    '-ms-transition',
    'transition'
    ];


$.each(browserTransitionCSS, function(something) { 
$('#logo').css({ 
something :  
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/200 
+ "deg)", 
                });
            });

そして今、何時間も格闘した後、私は屈服し、誰か助けてもらえないかと尋ねています.

私のURLを見るのが役に立つなら、尋ねてください。

ここで何か助けていただければ幸いです。どうもありがとうございました。

4

3 に答える 3

3

私はこのようなことをすると思います：

$(window).on('mousemove', function(e) {
    var current_width  = $(window).width(),
        current_height = $(window).height(),
        y = (e.pageX - (current_width / 2)) / 150,
        x = (e.pageY - (e.pageY * 2 - 600) - (current_height / 2)) / 300;

    $('#logo').css( transformObj(x,y) );
});

function transformObj(x,y) {
    var pfx = ['-webkit-transform','-moz-transform','-ms-transform','transform'],
        obj = {};

    $.each(pfx, function(k,val) {
        obj[val] = "rotateY("+y+"deg) rotateX("+x+"deg)";
    });
    return obj;
}

フィドル

別の関数でjQuery のメソッドに渡されるオブジェクトを作成しますcss()。この関数では、ブラウザのプレフィックスを反復し、それぞれにXとYローテーションを適用してから、 に戻しcss()ます。

于 2013-06-02T14:28:44.113 に答える
0

それぞれに渡す関数で受け取る最初の引数は、要素のインデックス (対象のオブジェクトが配列の場合) またはキー (連想配列の場合) になります。

試す：

$.each(browserTransitionCSS, function(i, element) { 
    ... and so on

関数内では、各トランジション要素を受け取ります: 「-webkit-transition」、「-moz-transition」をelement引数として受け取ります。幸運を

于 2013-06-02T14:24:06.833 に答える