Question

我制作了一个剧本。这将li项目设置在页面上的不同位置。这个职位是固定的职位。位置在数组中设置。

但是这个项目。必须有一个旋转。我用css3变换进行旋转。每个li项目必须有固定的旋转。我把8个固定的旋转位置放在一个数组中。但我有一个问题。每个li项目都获得相同的旋转位置。我该怎么办？每个li项都得到数组的另一个固定位置。

您可以在此处查看代码：click here

或者这是我的代码：

var images = [];

// Constructor for the "Position" structure
function Position(left, top) {
    this.left=left;
    this.top=top;
}

function rotate(object, degrees) {
    object.css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)',  
      '-ms-transform' : 'rotate('+degrees+'deg)',  
       '-o-transform' : 'rotate('+degrees+'deg)',  
          'transform' : 'rotate('+degrees+'deg)',  
               'zoom' : 1
    });
}

// sortFunction routine to help randomize array
function rand(ar){
    return 0.5-Math.random();
}

// Array containing the 8 positions you want to use
var positionArray = [
      new Position(0,  0) 
    , new Position(50, 50) 
    , new Position(100,100) 
    , new Position(150,150) 
    , new Position(200,200) 
    , new Position(250,250) 
    , new Position(300,300) 
    , new Position(350,350) 
];

var rotateArray = [0, 15, 30, 40, 50, 60, 70, 80];

function init() {
    $('.friend-selection li > div').each(function(){

        var id = this.id;
        var img = $('#img_' + id);
        var imageIndex = parseInt(id.substring(id.length - 1))-1; // This is a hack because you're using "picture*" as the id

        $("#parent_" + id).css({ //apply the position to parent divs
            top     : positionArray[imageIndex].top,
            left    : positionArray[imageIndex].left
        });

        rotate($(".friend-selection li"), rotateArray[imageIndex]);
    });
};

positionArray.sort(rand);

init();

Answer 1

应该是

rotate($("#parent_" + id), rotateArray[imageIndex]);

而不是：

rotate($(".friend-selection li"), rotateArray[imageIndex]);

获取数组的不同项

1 个答案: