jquery random rotate
I have a div with a bunch of images (20) and i like a little rotation on some let say +-2dg
i have try that with no success... all image are rotated equally
/* 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) {
开发者_JAVA百科 -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);
}
So i like to have to code in jquery that will go through all the image in the div and random rotate it + ou - 2 dg
anybody know hot to do that ?
$("#gallery2 img").each( function() {
var rNum = (Math.random()*4)-2;
$(this).css( {
'-webkit-transform': 'rotate('+rNum+'2deg)',
'-moz-transform': 'rotate('+rNum+'2deg)'
} );
} );
i have try that.. work well but your code is better and shorter
<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>
精彩评论