0

我正在编写旋转 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();
    }
});

});
4

2 回答 2

0

这就是你需要的：

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

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

这是工作演示。

于 2012-11-19T21:11:24.790 回答
0

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

于 2012-11-19T20:46:40.570 回答