jQuery原生简单实现图片旋转

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cl11992/article/details/88065497

一、介绍

本文介绍了使用原生js来实现图片旋转

优点：实现简单，开发容易

二、图片效果

页面样式按照你自己的效果写就可以了

三、代码介绍

DOM结构

<td style="padding-left: 24px;">
	<div class="fileimg">
		<a target="_blank" href="XXX">
			<img src="xxx" class="personal-img" style="height: 100px;width: 100px;"/>
		</a>
	</div>
	<div class="rc"><i class="rotate"></i>旋转</div>
</td>

JS实现

<script type="text/javascript">
$(function(){
    var rIndex=0;
    $(".rotate").click(function(){
	     var _this=$(this);
       rIndex++;
	     getRotate(_this,rIndex);
	     return false;
	  });
  
	  function getRotate(_this,index){
       var degree=index*90;
		 _this.parents().find("img.personal-img").css('transform','rotate('+degree+'deg)');
       _this.parents().find("img.personal-img").css('-ms-transform','rotate('+degree+'deg)');
       _this.parents().find("img.personal-img").css('-webkit-transform','rotate('+degree+'deg)');
       _this.parents().find("img.personal-img").css('-moz-transform','rotate('+degree+'deg)');
	  }
 })
</script>