我怎样才能得到一个div的图像源到另一个？

Question

我正在从事UI设计工作，我如何才能将图像的源代码在一个div中显示给另一个div，如果我点击它的话。 像在FB中一样，我怎样才能将图像的来源全屏显示到rightarrow按钮。 我正在使用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

可以使用像以下的代码：

/// 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); 

这里是下面的代码Demo

使用：

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 2

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

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

只需设置src

Answer 3

我认为你正在寻找的滑块effect.There很多jQuery的滑块插件免费提供的。

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

Demo

Answer 4

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