Question

我希望点击图标大小的图像和较大的图像之间的切换，并在两者之间平滑过渡。这是html：

 <head>
  <script src="./js/jquery-1.9.1.js"></script>
  <script src="./js/image_toggle.js"></script>
 </head>
 <body>
  <div id="pic_holder">
   <p id="toggle_para"><img id="toggle_image" src="./images/scene1.png"></p>
  </div>
 </body>

和jquery脚本：

jQuery(document).ready(function(){
  jQuery('img#toggle_image').on('click', function () {
    var origsrc = jQuery(this).attr('src');
    var src = '';
    if (origsrc == './images/icon.png') src = './images/larger_image.png';
    if (origsrc == './images/larger_image.png') src = './images/icon.png';
    jQuery(this).attr('src', src);
  });
});

但是，显示图标时，单击时仅显示损坏的图像符号，而不显示较大的图像。单击损坏的图像符号时，将显示图标。所以脚本正在发挥作用。

我已经使用Firebug检查了脚本，并且srcs正在正确切换。

非常感谢任何帮助。作为后记，如何实现两幅图像之间的平滑过渡？

Answer 1

＆＃13;

$(document).ready(function() {
  $('img#toggle_image').on('click', function() {
    var origsrc = $(this).attr('src');
    var src = '';
    origsrc == 'http://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' ? src = 'https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png' : src = 'http://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';//toggle between the src
    
    $(this)
        .fadeOut(400, function() {
            $(this).attr('src', src);//set src
    })
        .fadeIn(400);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_holder">
  <p id="toggle_para">
    <img id="toggle_image" src="http://res.cloudinary.com/demo/image/fetch/fl_png8/https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </p>
</div>

＆＃13;

Answer 2

＆＃13;

$(function(){
  $("img#toggle_image").on("click", function(){
    var origsrc = jQuery(this).attr('src');
    console.log(origsrc)
    var src =""
    if(origsrc == "http://placehold.it/300x200/afa6cc/ffffff&text=icon2"){
      src = "http://placehold.it/200x100/ff66cc/ffffff&text=icon1"
    } 
    else if(origsrc == "http://placehold.it/200x100/ff66cc/ffffff&text=icon1"){
      src = "http://placehold.it/300x200/afa6cc/ffffff&text=icon2"
    } 
    console.log(src)
    $(this).parent("p").fadeOut(function(){
      $(this).children("img").attr("src", src).parent("p").fadeIn()
    })
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
 <p id="toggle_para"><img id="toggle_image" src="http://placehold.it/200x100/ff66cc/ffffff&text=icon1"></p>

＆＃13;

Answer 3

使用可在2个州.on和.off之间切换的.toggleClass。使用了CSS属性transform和transition。唯一的元素是带有background-image和background-size: contain的div，可将图像保留在边缘并保持宽高比。

<强>段

＆＃13;

$('#img').click(function(){
    $(this).toggleClass('off on');
    return false;
});

＆＃13;

#img {
  width: 256px; height: 256px; background-image: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png); background-repeat: no-repeat; background-size: contain; cursor:pointer; }
  .off {
    overflow: hidden;
    max-height: 256px;
    padding: 0;
    margin: 0;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transform: scale(.50);
  }
  .on {
    overflow: hidden;
    max-height: 100vh;
    transition-duration: 0.7s;
    transition-timing-function: ease-in;
    transform: scale(4);
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img" class='off'></div>

＆＃13;

通过转换

3 个答案: