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

你能否分享你用来做这个的Javascript？基本上，您会至少提供目标<img和id并更改src属性以响应点击事件。

Answer 2

这就是你需要的：

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

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

这是有效的DEMO。

拉出图像并显示图像

2 个答案: