通过js修改图片的css样式,实现简单的图片旋转

html代码:

<img style="max-width: 700px; transform: rotate(360deg);" src="/image/test1.img" class="image1">

<input type="hidden" value="0" name="tran_num1">

<a href="javascript:;" class="rotate" image_id="1">旋转</a>

 

js代码:

$('.rotate').click(function () {

    var id = $(this).attr('image_id');

  var num = $('input[name=tran_num' + id + ']').val();

  var num = Number(num) + 1;

    var i = 90 * num;

  $("#image"+id).css("transform", "rotate(" + i + "deg)");

  if (num == 4) {

    var num = 0;

  }

  $('input[name=tran_num' + id + ']').val(num);

})

 

posted @ 2015-03-13 13:12  詹烨挺  阅读(1068)  评论(0编辑  收藏  举报