アイコンとトランジション付きの大きな画像の切り替え

アイコンサイズの画像と、その2つの画像のスムーズな切り替えによる大きな画像をオンクリックで切り替えたいとします。ここで、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が正しく切り替わっています。

ご協力いただければ幸いです。ポストスクリプトとして、2つのイメージ間のスムーズな移行がどのように影響を及ぼしますか？ 2つの状態.onと.off切り替える.toggleClassを使用

出典

2016-04-12 RoyS

$(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); 
 
    }); 
 
});

<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>

出典

2016-04-12 02:34:00 guradio

$(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() 
 
    }) 
 
    }) 
 
})

<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>

出典

2016-04-12 02:49:48

。 CSSプロパティーtransform、およびtransitionが使用されました。唯一の要素は、とbackground-size: containで、画像をエッジに保持し、アスペクト比を維持するdivです。

スニペット

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

#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); 
 
    }

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

出典

2016-04-12 03:33:24 zer00ne

アイコンとトランジション付きの大きな画像の切り替え

答えて

関連する問題