Question

我可以用javascript旋转li项目。

我有一个脚本。这会将随机li项目放在具有修复位置的页面上。但我可以给这个项目一个轮换。我想给每个项目另外一个轮换。我怎样才能给这八个项目一个固定的位置。

这是我的剧本：

var images = [];

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

        // 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) 
        ];

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


        // Randomize array - http://stackoverflow.com/questions/7802661
        positionArray.sort(rand);

        init();

Answer 1

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

    });
}

要调用该函数，例如：

rotate($("#image1"), 15)

jsfiddle：http://jsfiddle.net/hLqJb/

Answer 2

CSS3具有旋转可用性，但并非适用于所有浏览器。如果您没有附加到浏览器特定功能，则可以使用它。

-webkit-transform: rotate(15deg);
-moz-transform:rotate(15deg);
-o-transform:rotate(15deg);
-ms-transform:rotate(15deg);
transform:rotate(15deg);

转换为jQuery，应该不错。

使用javascript旋转图像

2 个答案: