jQuery图像旋转需要修复

时间:2015-01-06 19:08:09

标签: jquery html css

我有这段代码:

<html>
<head>
    <meta charset="utf-8" />
    <title>Atestat - Masini Clasice</title>

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
    <link rel="stylesheet" href="css/styles.css" />

<script src="js/jqueryrotate.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>

<script>
var value = 0
$("#image").rotate({ 
   bind: 
     { 
        click: function(){
            value +=180;
            $(this).rotate({ animateTo:value})
        }
     }
}); 
</script>



</head>

<body>

<img src="img/volan.png" id="image"/>

    <footer>

    <h2>Atestat <i>Masini clasice</i></h2>
    <a class="tzine"><i><b>Razvan Radu</b></i></a>

</footer>


</body>

中心图像称为&#34; volan&#34;当我点击它时应该旋转,但id不起作用 我使用jQuery Easing v1.3和jQueryRotate v2.3以及jQuery JavaScript Library v1.7.1。

2 个答案:

答案 0 :(得分:0)

<script>
$(function(){
  var value = 0
  $("#image").rotate({ 
    bind: 
     { 
        click: function(){
            value +=180;
            $(this).rotate({ animateTo:value})
        }
     }
  });
});
</script>

答案 1 :(得分:0)

不需要调用外部旋转功能。只需使用click事件即可。在那里你可以调用你的旋转功能:

var angle = 0;
$("#image").click(function() {
    angle += 180;
    $(this).rotate({ animateTo:angle})
});

为了确保您的事件设置正确,您必须在DOM完全加载后调用它:

$(function() {
    var angle = 0;
    $("#image").click(function() {
        angle += 180;
        $(this).rotate({ animateTo:angle})
    });
});