jQuery原生简单实现图片旋转

最新推荐文章于 2022-02-23 15:54:45 发布

cl11992

最新推荐文章于 2022-02-23 15:54:45 发布

阅读量2.7k

点赞数 1

分类专栏： jQuery 文章标签： jQuery 原生开发代码实例

本文链接：https://blog.csdn.net/cl11992/article/details/88065497

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、介绍

本文介绍了使用原生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>