Question

我正在开发一个基本上在高级图像查看器上的原型。我实现了（旋转，放大，缩小，向左，向右，向上和向下）。我遇到问题，当我先旋转它似乎搞砸了方向控制的方向。（实际上它正在做它所假设的）。奇怪的是，如果你首先击中一个方向控制它将起作用。

你可以获得像''轮换'这样的值，但我不确定它们是什么样的，好像我现在不确定这个问题。

这是我的实施：

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>

我对放大和缩小设置了限制器，因此这是条件的原因。

Answer 1

修正了它，这似乎有效：

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

jQuery Transit实现的问题

1 个答案: