Question

与标题一样，我使用＆＃39; .animate＆＃39;＆＃39;淡入淡出和不透明度：图像上为1，但如果点击它，如何保持缩放和选择。

<img id="imageuk" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/800px-Flag_of_the_United_Kingdom.svg.png" width="30" height="20" class="thumb" style="cursor: pointer;opacity:0.3;border-radius:3px;" onmouseover="bigImg5(this)" onmouseout="normalImg5(this)" onclick="language_2()">


<img id="imageitaly" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Italy.svg/800px-Flag_of_Italy.svg.png" width="30" height="20" class="thumb" style="cursor: pointer;opacity:0.3;border-radius:3px;" onmouseover="bigImg6(this)" onmouseout="normalImg6(this)" onclick="language_1()">

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

        function bigImg5(x) {
        $("#imageuk").animate({opacity: 1,height: 26, width: 39}, 250 );
    }

        function normalImg5(x) {
        $("#imageuk").animate({opacity: 0.3,height: 20, width: 30}, 250 );
    }

        function bigImg6(x) {
        $("#imageitaly").animate({opacity: 1,height: 26, width: 39}, 250 );
    }

        function normalImg6(x) {
        $("#imageitaly").animate({opacity: 0.3,height: 20, width: 30}, 250 );
    }

</script>

Answer 1

首先，您刚刚写了<img ... ></img>。这里</img>没有必要，因为img不是容器。只需使用<img ... />。

尝试此解决方案（使用“如何保持缩放并选中，如果我点击它”）：

var big = 1;

function bigImg5(x) {
  $("#imageuk").animate({
    opacity: 1,
    height: 26,
    width: 39
  }, 250);
}

function normalImg5(x) {
  if (big == 2) {
    $("#imageuk").animate({
      opacity: 0.3,
      height: 20,
      width: 30
    }, 250);
  }
}

function bigImg6(x) {
  $("#imageitaly").animate({
    opacity: 1,
    height: 26,
    width: 39
  }, 250);
}

function normalImg6(x) {
  if (big == 1) {
  $("#imageitaly").animate({
    opacity: 0.3,
    height: 20,
    width: 30
  }, 250);
    }
}

function language_1() {
  $("#imageitaly").animate({
    opacity: 1,
    height: 26,
    width: 39
  }, 250);
  $("#imageuk").animate({
    opacity: 0.3,
    height: 20,
    width: 30
  }, 250);
  big = 2;
}

function language_2() {
  $("#imageuk").animate({
    opacity: 1,
    height: 26,
    width: 39
  }, 250);
  $("#imageitaly").animate({
    opacity: 0.3,
    height: 20,
    width: 30
  }, 250);
  big = 1;
}

language_2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="imageuk" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/800px-Flag_of_the_United_Kingdom.svg.png" width="30" height="20" class="thumb" style="cursor: pointer;opacity:0.3;border-radius:3px;" onmouseover="bigImg5(this)"
onmouseout="normalImg5(this)" onclick="language_2()" />

<img id="imageitaly" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Italy.svg/800px-Flag_of_Italy.svg.png" width="30" height="20" class="thumb" style="cursor: pointer;opacity:0.3;border-radius:3px;" onmouseover="bigImg6(this)"
onmouseout="normalImg6(this)" onclick="language_1()" />

点击“＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;而.animate代码正在运行

1 个答案: