代码之家 › 专栏 › 技术社区 › menardmam

jquery随机旋转

rotation jquery

menardmam · 技术社区 · 16 年前

我有一个有一堆图像(20)的div,我喜欢在一些图像上稍微旋转,比如说+-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-2dg

有人知道这么做很有意思吗?

2 回复 | 直到 16 年前

rfunduk 16 年前

$("#gallery2 img").each( function() {
  var rNum = (Math.random()*4)-2;  
  $(this).css( {   
    '-webkit-transform': 'rotate('+rNum+'2deg)',
    '-moz-transform': 'rotate('+rNum+'2deg)'  
  } );  
} );

-1

menardmam 16 年前

我试过了。。工作很好,但你的代码更好,更短

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

推荐文章

Niko · 边框css更改速度快于变换旋转

8 年前

NOOBAF · 将数组传递给函数(C)

8 年前

Axel M · WPF自动旋转无极边界线ArgRadientBrush顺时针旋转,不旋转其余部分

8 年前

Mevia · 画布水平旋转img

8 年前

ThePurpleArcher · 统一if语句中四元数和eulerAngles的问题

8 年前

Nikolay Baranenko · Kafka循环垃圾收集日志

8 年前

E. Huckabee · SceneKit:使用平移手势将相机朝其面对的方向移动

8 年前

Thomas Schütt · javafx-如何将偏航、俯仰和滚动增量(而不是euler)应用于节点旋转轴,而不是场景旋转轴?

8 年前

Vinayak B · 确定片段重新启动是由于屏幕旋转还是浏览页面滑动?

8 年前

user9187461 · 管线旋转30度

8 年前