由Jquery旋转图像

时间:2014-01-14 05:03:35

标签: jquery html

我正在测试按jquery旋转的图像。参考是here(例5)。 我的代码中缺少什么,单击时图像不会旋转?

<html>
    <head>
        <title>Rotate Image</title>
        <script type="text/javascript" src="jquery.js"/>
        <script type="text/javascript" src="jQueryRotate.js"/>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#image").rotate({ 
                   bind: 
                     { 
                        click: function(){
                            $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
                        }
                     } 

                });
            });
        </script>   
        <img src="images/aaa1.jpg" id="image"/> 
    </body>
</html>

包裹:

enter image description here

1 个答案:

答案 0 :(得分:1)

您错过了包含jQuery核心

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>

脚本标记的结束标记也应为</script>

<html>
    <head>
        <title>Rotate Image</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jQueryRotate.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#image").rotate({ 
                   bind: 
                     { 
                        click: function(){
                            $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
                        }
                     } 

                });
            });
        </script>   
        <img src="http://placehold.it/64" id="image"/> 
    </body>
</html>