如何使用jquery旋转插件旋转图像?

如何使用jquery旋转插件旋转图像?,jquery,image,rotation,jquery-rotate,Jquery,Image,Rotation,Jquery Rotate,如何使用插件旋转图像 我尝试了以下方法,但似乎不起作用: <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>

如何使用插件旋转图像

我尝试了以下方法,但似乎不起作用:

<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>

查看照片
var角=0;
设置间隔(函数(e){
旋转();
}, 100 );
函数rotate(){
角度=角度+1;
$('#pic')。旋转(角度);
}

还需要大多数浏览器支持的其他方法,谢谢

jQuery和jQuery插件上有404。因此,您的页面抛出了一个JavaScript错误,$未定义

您需要学习基本的JavaScript调试技术。快速搜索发现这篇文章似乎是一个很好的起点:


您旋转图像的逻辑是正确的。如果在文档准备就绪时执行,它将起作用

<script type="text/javascript">
//<![CDATA[
    var angle = 1;

    $(document).ready(function() {
        setInterval(function() {
            $("#pic").rotate(angle);
            /* angle += 1; Increases the rotating speed */
        }, 100);
    });
//]]>
</script>

//

一旦修复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>

//

详细说明jvan的响应:之所以将其放入document.ready中,是因为网页DOM尚未准备好修改(或通过javascript“查看”)。关于ready事件的更多信息在这里:注意,我只是有点学究气,但我注意到Tom没有使用XHTML doctype//