jquery случайный поворот - PullRequest
       4

jquery случайный поворот

3 голосов
/ 01 октября 2010

У меня есть div с кучей изображений (20), и мне нравится небольшой поворот на некоторых, скажем, + -2dg

Я попробовал это безуспешно ... все изображения вращаются одинаково

/* By default, we tilt all our images -2 degrees */
#gallery2 img {
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    }

/* Rotate all even images 2 degrees */
#gallery2 img:nth-child(even) {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    }

/* Don't rotate every third image, but offset its position */
#gallery2 img:nth-child(3n)  {
    -webkit-transform: none;
    -moz-transform: none;
    }

/* Rotate every fifth image by 5 degrees and offset it */
#gallery2 img:nth-child(5n) {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    }

Так что мне нравится код в jquery, который будет проходить через все изображения в div и случайным образом поворачивать его + ou - 2 dg

кто-нибудь знает, как это сделать?

Ответы [ 2 ]

6 голосов
/ 01 октября 2010
$("#gallery2 img").each( function() {
  var rNum = (Math.random()*4)-2;  
  $(this).css( {   
    '-webkit-transform': 'rotate('+rNum+'2deg)',
    '-moz-transform': 'rotate('+rNum+'2deg)'  
  } );  
} );
0 голосов
/ 01 октября 2010

Я попробовал это .. работать хорошо, но ваш код лучше и короче

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $("#gallery2 img").each( function() {
    var posneg = Math.floor( (Math.random() * 2)  );
    if (posneg == 0) {posneg=-1} else {posneg=1};
    var angle = Math.floor( (Math.random() * 5) * posneg );
    $(this).css( 'transform', 'rotate(' + angle + 'deg)' );   
    $(this).css( '-moz-transform', 'rotate(' + angle + 'deg)' );   
    $(this).css( '-webkit-transform', 'rotate(' + angle + 'deg)' );
    $(this).css( '-o-transform', 'rotate(' + angle + 'deg)' );
    alert(angle);

    }); 
    }); 
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...