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

これを行うために使用しているJavascriptを共有していただけますか？基本的には、少なくともターゲット<imgにanを指定し、クリックイベントに応じてその属性idを変更します。src

于 2012-11-19T20:46:40.570 に答える
0

これはあなたが必要とするものです：

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

このコードは、クリックしている画像のクローンを作成し、それをターゲットdivに書き込んでいます。

これは動作中のデモです。

于 2012-11-19T21:11:24.790 に答える