0

私は、基本的に高レベルの画像ビューアのプロトタイプに取り組んでいます。実装しました (回転、ズームイン、ズームアウト、左、右、上下)。最初に回転を押すと、方向コントロールの向きが台無しになっているように見えます。（実際には、想定どおりに動作しています）。奇妙なことに、最初に方向コントロールを押すと機能します。

('rotation') のような値を取得できますが、この時点で問題が不明であるかのように、それらがどうなるかはわかりません。

これが私の実装です：

JS

var currentScale = 1;

 $(".icon-rotate-right").click(function () {
     $('#img-contain2').transition({
         rotate: '+=90deg'
     });
 });

 $(".icon-chevron-left").click(function () {
     $('#img-contain2').transition({
         x: '-=90'
     });
 });

 $(".icon-chevron-right").click(function () {
     $('#img-contain2').transition({
         x: '+=90'
     });
 });

 $(".icon-chevron-up").click(function () {
     $('#img-contain2').transition({
         y: '-=90',
     });
 });

 $(".icon-plus").click(function () {
     if (currentScale >= 5) {
         return false;

     } else {

         currentScale++;
         $('#img-contain2').transition({
             scale: '+=1'
         });
         $('#img-contain2').css("margin-top", "-90px");
     }

 });

 $(".icon-minus").click(function () {
     if (currentScale <= 1) {
         $('#img-contain2').transition({
             scale: '.5'
         });
         $('#img-contain2').css("margin-top", "-240px");

         if (currentScale <= 1) {
             return false;
         }

     } else {
         currentScale--;
         $('#img-contain2').transition({
             scale: '-=1'
         });
         $('#img-contain2').css("margin-top", "-240px");

     }

 });

HTML

<div class="inner-contain-main">
<div class="viewer">
   <div class="control-container">
      <i class="icon-rotate-right"></i><i class="icon-plus"></i><i class="icon-minus"></i>
      <div class="direction-container"><i class="icon-chevron-left"></i><i class="icon-chevron-up"></i><i class="icon-chevron-right"></i></div>
   </div>
   <div id="img-contain">
      <div  id="instructions">
         <p>Loading Preparation...</p>
      </div>
      <div  id="img-contain2"></div>
   </div>
</div>

ズームインとズームアウトにリミッターをかけたので、それが条件付きの理由です。

4

1 に答える 1

0

それを修正しました、これはうまくいくようです：

    $(".icon-rotate-right").click(function () {
    $("#img-contain2").transition({
        x: "+=0",
        y: "+=0",
        rotate: "+=90deg"
    });
});
于 2013-08-07T20:16:48.520 に答える