Trung tâm & Xoay hình ảnh với IE8 (jQueryRotate)

Question

Tất cả,

Tôi đang tìm cách lấy trung tâm và xoay hình ảnh để phản hồi nhấp chuột. Tôi đang sử dụng thư viện jQueryRotate.

Đây là cách tiếp cận mà tôi đang xem xét.

http://jsfiddle.net/HatAndBeard/k3Gxj/6/

này hoạt động tốt trong Chrome/Firefox nhưng không có trong IE8 hoặc thấp hơn. Có một số hiện vật hình ảnh mà tôi không thể thoát khỏi. Bất kỳ ý tưởng?

P.S. Tôi không có yêu cầu nghiêm ngặt về cách xoay vòng được thực hiện, vì vậy các phương pháp tiếp cận khác cũng được hoan nghênh.

P.S.S tôi có thể đăng mã nếu liên kết JSFiddle không phù hợp với ý thích của bạn.

Answer 1

Hi im một tác giả của plugin này và tôi hoan nghênh bất kỳ ý kiến ​​và các vấn đề về plugin này trên trang chủ của một plugin :)

Bạn có thể giải thích thêm một chút về vấn đề của mình không, vì tôi không thể làm cho nó tái tạo trong IE 8 hoặc IE7 được mô phỏng trong IE8. Ngoài ra tạo ra vấn đề sẽ được tốt đẹp :)

Vấn đề "lạ" duy nhất mà tôi thấy chỉ là một hiệu ứng hình ảnh tải mà bạn có thể dễ dàng thoát khỏi nếu sau khi tải trang của bạn, bạn chỉ cần thực hiện $ (img) .rotate (0) -> điều này sẽ đảm bảo rằng khi bạn nhấp vào hình ảnh nó sẽ sẵn sàng để animate :)

Chúc mừng,

Answer 2

Thay vào đó, bạn đã cố sử dụng RaphaelJS. Với thư viện này, tôi đã có trải nghiệm trình duyệt chéo tốt trong quá khứ.

quay hình ảnh với raphael trên nhấp chuột là một nhiệm vụ dễ dàng, hãy xem demo này: http://raphaeljs.com/image-rotation.html

Answer 3

tôi đã kết thúc làm việc xung quanh vấn đề bằng cách sử dụng chức năng xoay BasicImage trong IE. Tôi chỉ cần hiển thị hình ảnh với mức tăng 90 độ để cách tiếp cận này hoàn toàn khả thi.

Một phác thảo sơ bộ những gì tôi đã làm ...

function ieRotate(element, rotation) { 
      var rotationInt = 0; 
      switch (rotation % 360) { 
       case 0: 
        rotationInt = 0; 
        break; 
       case 270: 
       case -90: 
        rotationInt = 3; 
        break; 
       case 180: 
       case -180: 
        rotationInt = 2; 
        break; 
       case 90: 
       case -270: 
        rotationInt = 1; 
        break; 

      } 
      element.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + rotationInt + ')'); 
     }