4

我是 Javascript 和 Jquery 的新手，并且正在编写一个脚本，当鼠标在浏览器窗口中移动以更改图像透视图时，该脚本会更改 CSS“转换”值。

一切都很好！我只想简化我的 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)", 
                });
            });

现在，经过几个小时的挣扎，我正在屈服并询问是否有人可以帮助我。

如果查看我的网址会有所帮助，请询问。

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

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

小提琴

css()在一个单独的函数中创建传递给 jQuery 方法的对象，您可以在其中迭代浏览器前缀并将X和Y旋转应用于每个前缀，然后将其传递回css().

于 2013-06-02T14:28:44.113 回答
0

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

尝试：

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

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

于 2013-06-02T14:24:06.833 回答
0

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

#straight{
height: 30px;
border-right: 1px solid blue; 
-webkit-transform: rotate(45 deg);
transform: rotate(45 deg); 
position: absolute;
}
于 2015-07-09T11:32:35.910 回答