Javascript/jquery for array array

Question

Я новичок в Javascript и JQuery и нахожу скрипт, который меняет значения CSS 'transform', когда мышь перемещается в окне браузера, чтобы сделать перспективу изменения изображения.

Все работает отлично! Я просто хочу оптимизировать javascript/jquery, чтобы уменьшить количество кода (поскольку я настроен на CSS -webkit- -moz- -ms- и т. Д.), А также упростить настройку скрипта.

Ok так вот часть, я хочу, чтобы оптимизировать:

$('#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 «для» в цикле:

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 «каждый» в цикле:

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)", 
       }); 
      }); 

И теперь, после нескольких часов боюсь, я ухожу и спрашиваю, может ли кто-нибудь помочь мне.

Если было бы полезно, чтобы увидеть мой адрес, то, пожалуйста, спрашивайте.

Любая помощь здесь была бы очень признательна. Большое спасибо.

Answer 1

Я думаю, я хотел бы сделать что-то вроде этого:

$(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; 
} 

FIDDLE

Создание объекта передается css() метод JQuery в отдельной функции, где вы перебирать префиксы браузера и применять X и Y вращение к каждому, затем передача его обратно в css().

Answer 2

Первый аргумент, который вы получите в функции, которую вы передаете каждому, будет индексом элемента (если объект, который вы просматриваете, является массивом) или ключ (если это ассоциативный массив).

Try:

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

Внутри функции вы бы получать каждый переходный элемент: "-webkit-переход", "-moz-перехода" в качестве аргумента element. Успехов

Answer 3

Как использовать: для петли до 360 ангелов, ниже одна линия, она должна вращаться для 24 линий с одинаковым расстоянием.

#straight{ 
height: 30px; 
border-right: 1px solid blue; 
-webkit-transform: rotate(45 deg); 
transform: rotate(45 deg); 
position: absolute; 
}