jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

Posted 2023-03-25

参考技术A 本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法。分享给大家供大家参考，具体如下：
推荐一个图片旋转插件，用于浏览相册时，旋转图片。
运行效果截图如下：
点击此处查看在线演示效果。
具体代码如下：
<script
type="text/javascript">
$(document).ready(function
()

$("#images").rotate(45);
var
value
=
0
$("#images1").rotate(
bind:

mouseover:
function()
value
+=90;
$(this).rotate(
animateTo:value)


);
$('#button').click(function()
$("#images1").rotate(animateTo:parseInt($('#angel').val()));
);
function
rotation
()
$("#images2").rotate(
angle:0,
animateTo:360,
callback:
rotation,
easing:
function
(x,t,b,c,d)
return
c*(t/d)+b;

);

rotation();
);
</script>
上面只是js代码，完整实例代码点击此处本站下载。
更多关于jQuery插件相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

带有 jcrop 的 jQuery 旋转函数

【中文标题】带有 jcrop 的 jQuery 旋转函数

【英文标题】：jQuery Rotate Function with jcrop

【发布时间】：2012-09-20 07:41:16

【问题描述】：

我将 jcrop 与 jquery 一起使用，但也想使用 jQueryRotate(2.2)。裁剪工作正常但旋转不起作用。我有两个按钮 1) 裁剪和另一个用于旋转。旋转将顺时针和逆时针旋转图像

<form>
<input type="hidden" size="4" id="x1" name="x" />
<input type="hidden" size="4" id="y1" name="y" />
<input type="hidden" size="4" id="x2" name="x2" />
<input type="hidden" size="4" id="y2" name="y2" />
<input  type="hidden" size="4" id="w" name="w" />
<input type="hidden" size="4" id="h" name="h" />
<img src="test.jpg" id="photo"  >
 <input type="submit" name="sub12" value="Save Cropped Image" class="save" />
<input type="button" name="rotate1" value="Rotata" onclick="javascript:rot1()"   />
</form>

jQuery(function($)
$('#photo').Jcrop()

);

function rot1()

   $("#photo").rotate(45);

请帮忙

【问题讨论】：

代码似乎没有任何明显错误。您是否在浏览器控制台窗口中收到任何错误消息？

<script> 和 </script> 标签内的 javascript 吗？还是像您问题中的代码一样在页面中？如果不是那将是问题。而且onclick属性中不需要javascript:

【参考方案1】：

你可以尝试这样使用：

jQuery(function()

  $('#photo').Jcrop();

  $("input[name='rotate1']").click(function() 
     $("#photo").rotate(45);
     return false;
  );
);

【讨论】：

Google Chrome 控制台怎么说？按 F12 并选择 Console 窗口。

使用 Firebug 中的控制台窗口，如果您还没有，您现在将安装它。

实际上它独立工作正常，但使用 jcrop 时出现问题。错误控制台显示没有错误（FF）

不可能，因为 JS 是客户端而不是服务器端。请检查 PHP 代码或安全服务器设置。