jQuery图片旋转插件jQueryRotate.js用法实例
纯javascript代码实现浏览器图片预览时可以旋转
自己从网上找了半天,发现网上写的不是很全,我实现起来很费劲,决定写了这个文档,希望帮助有这样的需求的同类人员,少走弯路。
废话不多说,直接进入代码讲解部分,
原来的效果如下图
这个没有对图片进行选择的功能,客户要求能对图片进行旋转。
下面是做好的效果图
单击旋转图片或者2222可以旋转90度,如下图所示
再次单击如下图所示
现在我开始代码截图
1,首先引用js
2.在页面添加如下红色代码
说明:绿色的代码是之前的写法,红色部分是新增的代码
页面还要加入弹出框的代码如下
并且新建个页面如下
3.在相应的js中添加如下代码
function contContext(realName) {
$("#main").attr("src", "../../abs/financing/downloadFileNew.htm?realName="+realName);
$("#contractVerificationCode").modal('show');
/* }
});*/
}
var num = 0;
function fdsf() {
num ++;
//$(’#img2’ ).rotate(90);
$("#main").rotate(90*num);
}
就可以实现的了