मैं अपनी कला परियोजना के लिए jQuery के मूसडाउन और माउसअप का उपयोग करने की कोशिश कर रहा हूं।

मेरा लक्ष्य नीचे दिए गए चार डिव बॉक्स में से एक पर क्लिक (और क्लिक मूवमेंट को होल्ड डाउन) करने में सक्षम होना है, एक सरणी से एक छवि बेतरतीब ढंग से पूर्ण-चौड़ाई (पूर्णस्क्रीन) प्रदर्शित की जाएगी। जब आप क्लिक (माउसअप) को छोड़ देते हैं, तो छवि चली जाती है। इसलिए जब आप फिर से एक बॉक्स पर क्लिक (और होल्ड) करते हैं, तो नीचे क्लिक करने के लिए सरणी से एक नई छवि का चयन करें और जब आप क्लिक को छोड़ दें तो छवि चली जाती है। नोट: प्रत्येक बॉक्स में छवियों की अपनी सरणी होगी।

जिस समस्या में मैं चल रहा हूं वह है जब मैं एक बॉक्स (div) पर क्लिक (माउसडाउन) करता हूं, जो छवि पूर्णस्क्रीन जाती है वह बॉक्स/div को कवर करती है और जब मैं क्लिक (माउसअप) को छोड़ देता हूं, तो छवि दूर नहीं जाती है। (सुनिश्चित नहीं है कि यह div के साथ कोई समस्या है या मेरा कोड गलत है?)

एक और समस्या जो चल रही है वह यह है कि पहले क्लिक के बाद कार्य नहीं होते हैं।

प्रश्न: क्या इसके लिए जावास्क्रिप्ट के ऑनमाउसअप और ऑनमाउसडाउन का उपयोग करना बेहतर होगा?

मैं इसे पूरा करने के लिए jQuery के mousedown() और mouseup() का उपयोग कर रहा हूँ। फ़ंक्शन एक बार एक बॉक्स/डिव के लिए आग लगती है, लेकिन इसे क्लिक करने के बाद यह आग नहीं लगती है।

मैं चाहता हूं कि मेरा कोड उपयोगकर्ता को किसी भी बॉक्स पर क्लिक करने की अनुमति दे, एक सरणी से एक छवि को खिलाने में सक्षम हो (प्रत्येक बॉक्स की अपनी अनूठी छवियों के साथ अपनी सरणी होगी) और मूसडाउन पर (माउस पर नीचे क्लिक करें) ) एक छवि प्रदर्शित होती है। माउसअप पर (क्लिक को छोड़ देना) छवि चली जाती है। मैं चाहता हूं कि उपयोगकर्ता किसी भी बॉक्स/डिव पर क्लिक करने में सक्षम हो, और एक छवि प्रदर्शित हो। एचटीएमएल अनुभाग के बारे में खेद है, मेरा पहला div काट दिया जा रहा है।

$(".box1")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box2")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box3")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box4")
  .mouseup(function() {
    $("#pasteHere").remove();
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });
.box1,
.box2,
.box3,
.box4 {
  width: 25%;
  height: 100px;
}

.box1 {
  background: red;
}

.box2 {
  background: blue;
}

.box3 {
  background: green;
}

.box4 {
  background: yellow;
}

#pasteHere {
  width: 100% height:auto;
  position: absolute;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">

</div>
<div class="box2">

</div>
<div class="box3">

</div>
<div class="box4">

</div>

<img src="" id="pasteHere" />

अग्रिम में बहुत धन्यवाद! ये रही मेरी पहेली: https://jsfiddle.net/vsyjb7dr/2/

2
user2647510 22 अगस्त 2019, 07:27

1 उत्तर

सबसे बढ़िया उत्तर

आप माउसआउट ईवेंट पर छवि तत्व निकाल रहे हैं। जो दूसरी बार छवि प्रदर्शित नहीं करेगा।

अगर आप फुलस्क्रीन इमेज चाहते हैं तो आपको डॉक्यूमेंट का माउसआउट जोड़ना होगा। क्योंकि छवि पूरे दस्तावेज़ को कवर करेगी, यह बॉक्स माउसआउट की अनुमति नहीं देगी।

और सभी बॉक्स को एक ही क्लास देकर कोड को कम कर सकते हैं।

$(".box1")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box2")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
  });

$(".box3")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
});


$(".box4")
  .mouseup(function() {
		$("#pasteHere").attr("src","");
  })
  .mousedown(function() {
    var images = ["http://placehold.it/800x800", "http://placehold.it/700x700", "http://placehold.it/600x600", "http://placehold.it/500x500", "http://placehold.it/400x400", "http://placehold.it/100x100", "http://placehold.it/200x200"];

    var image1 = Math.floor((Math.random() * 7));

    $("#pasteHere").attr("src", images[image1]);
});

$(document).mouseup(function() {
		$("#pasteHere").attr("src","");
});
.box1,.box2,.box3,.box4{
  width:25%;
  height:100px;
}
.box1{
  background: red;
}
.box2{
  background: blue;
}
.box3{
  background: green;
}
.box4{
  background: yellow;
}
#pasteHere{
width:100%;
height:auto;
position: absolute;
top:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1 box">

</div>
<div class="box2 box">

</div>
<div class="box3 box">

</div>
<div class="box4 box">

</div>

<img src="" id="pasteHere"/>

https://jsfiddle.net/u4syckb3/

1
Ravi 22 अगस्त 2019, 04:50