使用jquery mobile旋轉圖像

我正在研究一個應用程序，我想循環地旋轉圖像。使用jquery mobile旋轉圖像

我在SO上嘗試了很多解決方案。但我無法做到。但我有這個鏈接，它適用於網絡http://jsfiddle.net/mgibsonbr/tBgLh/11/完美。

我試圖修改mousedown到touchstart，mouseup到touchend和mousemove到touchmove和結合功能。但我無法實現它。

我可以知道我怎麼能完成相同的jquery移動。

謝謝:)

來源

2013-07-02 Beginner

工作的jsfiddle例如：http://jsfiddle.net/Gajotres/ZbFEQ/

這些事件：

mousedown

vmousedown

vmouseup

：210

mouseup

mousemove

用改變vmousemove

vmouse事件是jQuery Mobile事件，它是爲了彌合臺式機和移動設備之間的差異而構建的。他們將在這兩個環境中成功工作。

的另一個區別是它們是如何約束，這一點：

$('.handle').mousedown(function (e) {

改變用：

$('.handle').on('vmousedown',function (e) {

的Javascript：

$(function() { 
    var dragging = false, 
     target_wp, 
     o_x, o_y, h_x, h_y, last_angle; 
    $('.handle').on('vmousedown',function (e) { 
     h_x = e.pageX; 
     h_y = e.pageY; // clicked point 
     e.preventDefault(); 
     e.stopPropagation(); 
     dragging = true; 
     target_wp = $(e.target).closest('.draggable_wp'); 
     if (!target_wp.data("origin")) target_wp.data("origin", { 
      left: target_wp.offset().left, 
      top: target_wp.offset().top 
     }); 
     o_x = target_wp.data("origin").left; 
     o_y = target_wp.data("origin").top; // origin point 

     last_angle = target_wp.data("last_angle") || 0; 
    }) 

    $(document).on('vmousemove',function (e) { 
     if (dragging) { 
      var s_x = e.pageX, 
       s_y = e.pageY; // start rotate point 
      if (s_x !== o_x && s_y !== o_y) { //start rotate 
       var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin 
       s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin 
       s_rad += last_angle; // relative to the last one 
       var degree = (s_rad * (360/(2 * Math.PI))); 
       target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
       target_wp.css('-moz-transform-origin', '50% 50%'); 
       target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
       target_wp.css('-webkit-transform-origin', '50% 50%'); 
       target_wp.css('-o-transform', 'rotate(' + degree + 'deg)'); 
       target_wp.css('-o-transform-origin', '50% 50%'); 
       target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)'); 
       target_wp.css('-ms-transform-origin', '50% 50%'); 
      } 
     } 
    }) // end mousemove 

    $(document).on('vmouseup', function (e) { 
     dragging = false 
     var s_x = e.pageX, 
      s_y = e.pageY; 

     // Saves the last angle for future iterations 
     var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin 
     s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin 
     s_rad += last_angle; 
     target_wp.data("last_angle", s_rad); 
    }) 
})

測試了：

火狐21.0
IE 9,10-
鉻27.0.1453。116米
的Android 4.1.1鉻
的iOS ipad公司的Safari 3

來源

2013-07-02 13:15:32 Gajotres

使用此鏈接，旋轉圖像http://code.google.com/p/jqueryrotate/

來源

2013-07-02 13:15:22

使用jquery mobile旋轉圖像

回答

相關問題