拉出图像并显示该图像

Question

我正在写的代码，旋转6张图片。所有的图片都在一个div元素中。我的主要目标是无论点击什么图片，该图片都会显示在弹出框旁边。我已经创建了弹出框，但在提取图像时遇到问题。有什么想法吗？下面是我的图像在主体中的编码方式。

<div>
<div id="screen">
<img alt="ff" src="Pics/usb.png" onmouseover="stop()" id="usb">
<img alt="ee" src="Pics/chip.png" onmouseover="stop()" height="100" width="100"   id="chip">
<img alt="dd" src="Pics/Computer_chip.jpg" onmouseover="stop()" id="cchip">
<img alt="cc" src="Pics/alaptop.jpg" onmouseover="stop()" id="laptop">
<img alt="bb" src="Pics/cell.jpg" onmouseover="stop()" id="cell">
<img alt="aa" src="Pics/cb.jpg" onmouseover="stop()" id="cb">
</div>
</div>

这是我编写的javascript

function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
    $("#backgroundPopup").css({
        "opacity": "0.0"
    });
    $("#backgroundPopup").fadeIn("slow");
    $("#popupContact").fadeIn("slow");
    $("#screen").css({
        "opacity": "0.0"            
    });
    $("#screen img").css({
        "position": "absolute"

        });


    popupStatus = 1;

}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").fadeOut("slow");

    popupStatus = 0;
    $("#screen").css({
        "opacity": "1"
    });
}
}

//centering popup
function posPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
    "position": "fixed",
    "top": windowHeight/9-popupHeight/8,
    "left": windowWidth/2-popupWidth/8
});
$("#usb1").css({
    "position": "relative",
    "top": windowHeight/2-popupHeight/8,
    "left": windowWidth/2-popupWidth/8
});
//only need force for IE6


$("#backgroundPopup").css({
    "height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP
//Click the image event!
$("#usb").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
$("#chip").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
$("#cchip").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
$("#laptop").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
$("#cell").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});
$("#cb").click(function(){
    //centering with css
    posPopup();
    //load popup
    loadPopup();
    stop();

});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
    disablePopup();
    m.run();
});
//Click out event!
$("#backgroundPopup").click(function(){
    disablePopup();
    m.run();
});
//Press Escape event!
$(document).keyup(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup();
        m.run();
    }
});

});

Answer 1

这就是你所需要的：

$("#images img").click(function() {
    var img = $(this).clone();
    $('#target img').remove(); 
    $('#target').html(img);     
});​

此代码克隆您正在单击的图像，并将其写入目标div。

这就是working DEMO。

Answer 2

你能分享一下你用来做这件事的Javascript吗？基本上，您至少需要为目标<img提供一个id，并更改它的src属性以响应单击事件。