如何使用 jquery 旋转插件旋转图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/365820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Howto rotate image using jquery rotate plugin?
提问by Tom
How do you rotate an image using jQuery-rotateplugin?
如何使用jQuery-rotate插件旋转图像？
I have tried the following and it doesn't seem to work:
我尝试了以下方法，但似乎不起作用：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>View Photo</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.rotate.1-1.js"></script>
<script type="text/javascript">
var angle = 0;
setInterval ( function (e) {
rotate();
}, 100 );
function rotate() {
angle = angle + 1;
$('#pic').rotate(angle);
}
</script>
</head>
<body>
<img border="0" src="player.gif" name="pic" id="pic">
</body>
</html>
Other methods that are supported by most browsers are wanted too, thanks!
还需要大多数浏览器支持的其他方法，谢谢！
回答by mqsoh
You've got a 404 on jQuery and the jQuery plugin. Because of that, your page is throwing a JavaScript error, that $ is not defined.
您在 jQuery 和 jQuery 插件上遇到了 404。因此，您的页面会抛出一个 JavaScript 错误，即 $ 未定义。
You need to learn basic JavaScript debugging techniques. A quick search found this article that looks like a good place for you to start:
您需要学习基本的 JavaScript 调试技术。快速搜索发现这篇文章看起来是您开始的好地方：
回答by jvan
Your logic for rotating the image is right. It will work if executed when the document is ready.
您旋转图像的逻辑是正确的。如果在文档准备好时执行，它将起作用。
<script type="text/javascript">
//<![CDATA[
var angle = 1;
$(document).ready(function() {
setInterval(function() {
$("#pic").rotate(angle);
/* angle += 1; Increases the rotating speed */
}, 100);
});
//]]>
</script>
回答by Spencer
Once you fix your jquery include issues, you can fix your script. Your syntax is wrong: Here is the fix:
一旦您修复了 jquery 包含问题，您就可以修复您的脚本。您的语法错误：修复方法如下：
<script type="text/javascript">
//<![CDATA[
var angle = 1;
$(document).ready(function(angle) {
setInterval(function(angle) {
$("#pic").rotate(angle);
/* angle += 1; Increases the rotating speed */
}, 100);
});
//]]>
</script>
