循环数组的Javascript/jquery

我不熟悉Javascript和Jquery，正在编写一个脚本，当鼠标在浏览器窗口内移动时，该脚本会更改CSS“transform”值，以更改图像透视图

一切都很好！我只想简化我的javascript/jquery，以减少代码量（因为我是CSS目标-webkit--moz--ms-等等），并使调整脚本更容易

好的，这是我想精简的部分：

$('#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”循环：

现在，经过几个小时的挣扎，我屈服了，问是否有人能帮助我

如果它将有助于看到我的网址，然后请询问

---

我们将非常感谢您的帮助。非常感谢。

在传递给每个函数的函数中，您将收到的第一个参数是元素的索引（如果要查看的对象是数组）或键（如果是关联数组）

尝试：

---

在函数内部，您将接收每个转换元素：“-webkit transition”、“-moz transition”作为

元素

参数。祝你好运

我想我会这样做：

$(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（）

如何使用：对于循环直到360个角度，下面是一行，它必须旋转24小时 相同距离的线

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

---

谢谢你的回答。我的第一个摘录中没有包含所有代码，这可能会造成混乱。我的代码非常适合我需要它做的事情，但是我只想知道如何缩短代码。而不是：'-webkit-transform'：所有代码，'-moz-transform'：我只想放的所有代码等：Array='-webkit-transform'，'-moz-transform'等等。现在循环这个：Array:ALLCODE@MichaelWalkling-我添加鼠标移动是为了演示，但是上面的代码应该向您展示了一个非常好的示例，说明了如何迭代浏览器前缀的变换属性，并将值应用于对象，以及如何将其传递到

.css（object）等

再次感谢您，但我仍然不太明白这一点。我编写了一个工作示例：。任何帮助都将不胜感激。@MichaelWalkling-并且使用上面代码中类似的东西，该小提琴看起来像是，迭代数组，并设置x和y值？太棒了！非常感谢你！谢谢你的回答。我试过：$.each（BrowserTransitionss，function（I，element）{$（'#logo'）.css（{something:“rotateY”（“等）。但这不起作用。好吧，我还不太清楚，所以编写了一个工作示例：。任何帮助都将不胜感激。

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

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

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