Javascript/jquery for循环数组

我是Javascript和Jquery的新手，并且正在写一个脚本，当鼠标在浏览器窗口中移动以更改图像视角时，它将更改CSS“变换”值。Javascript/jquery for循环数组

一切都很好！我只想简化我的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“为”循环我第一次尝试：

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

而现在，几个小时后，挣扎着，我放弃了，问是否有人能帮助我。

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

这里的任何帮助将非常感激。非常感谢你。

来源

2013-06-02 Michael Walkling

好吧我仍然不是那么那么编码一个工作的例子：http://jsfiddle.net/asy9u/5/。任何帮助将不胜感激。 –

我想我会做这样的事情：

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

创建传递给jQuery的css()方法在一个单独的函数的对象，你遍历浏览器的前缀并应用X和Y旋转到每一个，然后将其传回到css()。

来源

2013-06-02 14:28:44 adeneo

谢谢你的回答。我没有将我的所有代码都包含在第一次提取中，这可能会导致混淆。我的代码完全适用于我需要的功能，但我只想知道如何缩短代码。而不是： '-webkit-transform'：所有的代码， '-moz-transform'：所有的代码等我只想把：Array ='-webkit-transform'，'-moz-transform'等现在循环显示： Array：ALL THE CODE –

@MichaelWalkling - 我为示范目的添加了mousemove，但上面的代码应该会向您展示如何迭代浏览器前缀转换属性以及应用值到对象，以及如何将它传递给'.css（对象）等' – adeneo

再次感谢，但我还没有得到这个。我编写了一个工作示例：http://jsfiddle.net/asy9u/5/。任何帮助将不胜感激。 –

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

尝试：

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

你会接收到每个过渡元素在函数内部： “-webkit-过渡”， “-moz-转型” 作为element参数。祝你好运

来源

2013-06-02 14:24:06 Mariano

谢谢你的回答。我试过这个：$ .each（browserTransitionCSS，function（i，element）{（'＃logo'）。css（{ something： “rotateY（”等等）但这不起作用 –

http：///jsfiddle.net/asy9u/5/ –

如何使用：for循环直到360天使，下面是一条线，它必须旋转24条相同距离的线条。

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

来源

2015-07-09 11:32:35

Javascript/jquery for循环数组

回答

相关问题