在圖像上使用raphael動畫

我有一個raphael.js圈子，當我點擊它彈出大。這種緩和效應使它看起來像一種魅力

circle = paper.circle(1000, 500, 25); 
circle.click(function() { 
     this.animate({ r: 500 }, 1000,'super_elastic'); });

我想在圖像上使用它。像

<body> 
    <img src="bla.jpg" id="image"/> 
</body> 

<script> 
    var image_1 = $('#image') 
    image_1.click(function() { 
     this.animate({ r: 500 }, 1000,'super_elastic'); }); 
</script>

這是可能的嗎？

我是raphael的新手，這意味着我真的不知道它是否只適用於畫布！

感謝您的幫助！

來源

2013-05-14 supersize

我不認爲你可以使用拉斐爾功能，無需使用圖像中

Paper.image(src, x, y, w, h);

如何JQuery Fancybox?

對不起，如果我誤解了你需要的畫布創建。

來源

2013-05-15 00:27:24

這樣就可以用'rect'動畫形狀構建。 – lib3d

請參考此示例代碼。第一個使用拉斐爾。和下一個使用jQuery。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitieal//EN"> 
<html> 
    <head> 
     <title>Test Raphael</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type ="text/javascript" src="jquery.min.js" ></script> 
     <script type ="text/javascript" src="raphael.js" ></script> 
    </head> 
    <body> 
     <div id="raphael" style=""></div> 
     <script> 
      var paper = Raphael("raphael", 500, 500), 
       image = paper.image('bla.jpg', 0, 0, 100, 100); 
      image.click(function() { 
       this.animate({width: 500, height: 500}, 1000); 
      }); 

     </script> 
     <div style="position:absolute; left:600px; top: 0px"> 
      <img src="bla.jpg" id="image" width="100" height="100"/> 
     </div> 
     <script> 
      var image_1 = $('#image') 
      image_1.click(function() { 
       $(this).animate({ 
        width: 500, 
        height: 500 
       }, 1000, 'linear'); 
      }); 
     </script> 
    </body> 
</html>

來源

2013-05-15 08:59:44

在圖像上使用raphael動畫

回答

相關問題