用于循环数组的 Javascript/jquery

Question

我是 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" 循环：

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" 循环：

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

使用方法：for循环直到360个角度，下面是一行，必须旋转24个 距离相同的线。

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

Answer 2

我想我会做这样的事情：

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

Answer 3

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

试试：

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

在函数内部，您将接收每个过渡元素：“-webkit-transition”、“-moz-transition”作为element 参数。祝你好运