Jquery-Rotate实现查看原图并旋转图片

1.实现功能

当图片被缩小放置到一个固定大小的div内，以下代码通过jquery.rotate组件实现点击查看原图并且90度顺时针旋转。

2.代码

js引入

 <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="../js/jquery.rotate.min.js"></script>

js代码

$("#ImgPath1").rotate({ bind: { click: function(){if(value1==270){$(this).css("width","100%"); $(this).css("max-height","200px"); value1 +=90;$(this).rotate(value1);value1 = 0;}else{var img = new Image(); img.src =$(this).attr("src") ; var imgWidth = img.width; //图片实际宽度 var imgHeight = img.height;$(this).attr("style","width: "+imgWidth); $(this).attr("style","height: "+imgHeight); value1 +=90;$(this).rotate(value1)}}} });

3.个人标示

caicongyang:http://blog.csdn.net/caicongyang

Jquery-Rotate实现查看原图并旋转图片相关推荐

html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
react + antd 封装一个图片预览，旋转，查看原图组件
最近在项目中的一个需求是, 小图点击可以弹框放大,然后能查看原图,顺时针一直旋转,每次90度. 实现方法: 使用react开发,所以直接选用antd 的组件, Upload .结合CSS3的旋转属性: ...
点击图片查看原图（图片按比例展示，点击旋转）
使用layer弹框:实现点击图片查看原图的效果: 引入layer,函数封装: // 点击图片查看大图 function showBigImage(e) {let src = $(e).attr('sr ...
弹出查看图片_报表工具如何实现“点击查看原图”
在各种涉及图片的 Web 网站上,无论是搜图类.社交类.保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看.这种操作 ...
HTML5 实现图片预览和查看原图
html5从一开始就给开发者很多的期待,提供众多新的API,不用再想以前一样,为了实现某个功能写很多的代码.在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地 ...
html5 预览图片原理,html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
java如何利用rotate旋转图片_Java实现图片翻转以及任意角度旋转
最近几天在做一个项目,因为涉及到了图片(绝大部分都不是整图,是把一张张的大图切成小图,也就是Title)的翻转以及90°旋转,弄得焦头烂额.在网上搜索好几天,发现用到的方法都是比较公式化的,对于只是在 ...
HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...

Jquery-Rotate实现查看原图并旋转图片

1.实现功能

2.代码

3.个人标示

Jquery-Rotate实现查看原图并旋转图片相关推荐

最新文章

热门文章