jQuery在页面上旋转图像

时间:2018-03-19 18:31:42

标签: jquery

我有一个将现有作业更改为jQuery动画的作业。我想点击一个按钮,让图像在现有页面上生长并旋转,然后再启动下一页,就像旧的60年代蝙蝠侠电视剧中的蝙蝠符号一样。到目前为止,我只有.click到位置。我尝试其他功能失败了。我需要什么插件?

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="_js/jquery.min.js"></script>
    script src="_js/jquery-ui.min.js"></script>
    <script>

$( document ).ready(function() {      
            $( "#fail" ).click(function() {
                //send to fail.html
                location = "fail.html";
            });//end click
});//end ready
</script>

1 个答案:

答案 0 :(得分:0)

我希望这完成了作业。到目前为止,经过几天的jQuery ui,我很沮丧。它没有辜负它的标记线,用更少的东西做更多。至少还没有。如果我有空间,我将使用explode for image显示教科书示例。我无法将任何jQuery ui动画应用于我的图像,无论是在div还是画布中。工作示例我尝试了一个音频元素,它不会隐藏然后自动播放。工作示例使用css动画,变换缩放和变换旋转为myImage。如果我有空间或开始另一个,我会在这里发布另一场斗争。 我的例子

    <script>
        $( document ).ready(function() {
        $( "#myImage" ).hide();
        $( "#myButton" ).click(function() {
        $( "#bone" ).show();
        setTimeout(function(){
            location = "fail.html";
            },
            2000);
         });//end click

       });//end ready

     </script>

教科书示例

   <script>
      $(document).ready(function() {
      $('#confirm').dialog({
      modal: true,
      autoOpen: false,
      buttons : {
        "Confirm" : function() {
        $('#anImage').effect('explode');
        $(this).dialog('close');
      },
      "Cancel" : function() {
        $(this).dialog('close');
      }
     } // end buttons
    });
     $('#anImage').click(function() {
     $('#confirm').dialog('open');
    }); // end click
    }); // end ready
    </script>

My other struggle is applying jQuery ui to a href. I have tried helps from this site to make href a target the apply the ui to the image such as 

   <a href="#"><div id="shoes">
    <div id="menShoes">
   <img src="img/menShoes.jpg" alt="menShoes>
   </div>
   </div></a>
   <script>
   $(document).ready(function() {
   $("input").hover(function(){
            $(this).css({url ("img/womenShoes.jpg")});
     }); // end hover
   }); // end ready
   </script>

无法使用