如何將一個div中的圖像來源轉換為另一個div？

Question

我正在進行UI設計，如果單擊它，如何將一個div中的圖像源獲取到另一個div中。 像在FB中一樣，我如何全屏顯示圖像源到rightarrrow按鈕。 我正在使用jQuery，html，css。

全屏：

$('.fullscreen').bind('click', function(event) {
    var sectionId = $(this).parents('ul').attr('id');
    var outputId  sectionId.replace('ul','img');
    var fullObj = $('#singleTemp').clone();
    var imgTarget = $('#' + outputId).attr('src');

    fullObj.find('#full').attr('src', imgTarget);

    $('#fullscreenTemp').html(fullObj.html());

    var target = document.getElementById('fullscreenTemp');
    $('#fullscreenTemp').show();

    screenfull.request(target);
});

screenfull.js是我的全屏插件

箭頭的html：

<div id="singleTemp" style="display:none">
    <div id="fullDiv" style="text-align: center">
        <div class="fs-main"> 
            <div class="fs-pic">
                <img id="full" style="max-height:100%; max-width:100%;" alt="imagecontainer image" src=""/>
            </div>
            <div class="fs-leftarrow">
                <img  id="1" src="jqe13/image/leftarrow.PNG"/>
            </div>
            <div class="fs-rightarrow">
                <img src="jqe13/image/rightarrow.PNG"/>
            </div>
            <div class="fs-remove">
                <img src="jqe13/image/removee.png" height="20"onclick=""/>
            </div>
            <div class="fs-like">
                <img src="jqe13/image/like.PNG" height="45"/>
            </div>
            <div class="fs-unlike">
                <img src="jqe13/image/unlike.PNG" height="45"/>
            </div>
        </div>
    </div>
</div>

html到圖像：

<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg"  rel="tooltip" content="
     <img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
  <img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
  <li id="outfullscreen"><a href="#">
    <img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" 
     title="Full Screen"></a></li>
    </ul>
 </div>

我在outputimageId中有圖像。

Answer 1

var src = $("#someImg").attr("src");

var src = $("#otherImg").attr("src",src);

只需設置src

Answer 2

我認為您正在尋找滑塊效果。有許多免費的jquery滑塊插件。

例如： http : //www.hongkiat.com/blog/jquery-image-galleries-sliders-best-of/

演示

Answer 3

您可以使用類似以下代碼的代碼：

/// First div
<div id="first">
    <img alt="example" src="\images\test.jpg" />
 </div>

// second div 
<div id="first">
    <img alt="example2" src="\images\blank.jpg" />
 </div>



var divsrc1 = $('img[alt="example"]').attr('src');

var divsrc2 = $('img[alt="example2"]').attr('src');
divsrc2 = divsrc1;
alert("source of image with alternate text = example - " + divsrc2);

這是演示

使用以下代碼：

var divsrc1 = $('#first img').attr('src');
//alert("source of image with alternate text = example - " + divsrc1);
var divsrc2 = $('#sec img').attr('src');
//alert("source of image with alternate text = example - " + divsrc2);
divsrc2 = divsrc1;
alert("source of image with alternate text = example - " + divsrc2);

Answer 4

var input = $("#rightoutputimgae").prop("src");
$("#otherImg").prop("src",input );