Javascript / jquery for loop array

Question

I am new to Javascript and Jquery and will write a script that changes the CSS 'transform' values ​​when the mouse moves in the browser window to make the image change perspective.

Everything works great! I just want to optimize javascript / jquery in order to reduce the amount of code (since I focus on CSS -webkit- -moz- -ms- etc.), and also simplify the setup of the script.

So here is the part I want to optimize:

$('#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)", }); 

As you can see, the only change in each of the four central sections is the specific elements of the CSS browser (-webkit-, -moz-, etc.), so naturally, I want to create an array that will contain each of these options and then iterate over the options.

This is my first attempt to use javascript "for" for a loop:

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

This is my second attempt using jquery "each" to loop:

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

And now, after several hours of fighting, I am leaving and asking if anyone can help me.

If it would be helpful to see my URL, please ask.

Any help here would be greatly appreciated. Thank you very much.

Answer 1

I think I would do something like this:

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

Creating an object passed to the jQuery css() method in a separate function, where you iterate over the browser prefixes and apply the X and Y rotation to each of them, and then pass it back to css() .

Answer 2

The first argument that you get in the function that you pass to each will be the index of the element (if the object you are viewing is an array) or the key (if it is an associative array).

Try:

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

Inside the function, you will receive each transition element: "-webkit-transition", "-moz-transition" as the argument to element . Good luck.

Answer 3

How to use: for a cycle of up to 360 angels, below is one line, it should rotate on 24 lines with the same distance.

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