जावास्क्रिप्ट: jquery या plugins के बिना माउसओवर पर ज़ूम इन करें

मैंने इसे हर जगह हफ्तों तक देखा है, और मुझे बस कुछ नहीं पता कि मैं क्या गलत कर रहा हूं या आगे बढ़ना भी चाहता हूं। लक्ष्य छोटी छवियों वाले उत्पादों के लिए माउसओवर पर अमेज़ॅन के ज़ूम के समान फ़ंक्शन बनाना है।जावास्क्रिप्ट: jquery या plugins के बिना माउसओवर पर ज़ूम इन करें

मैं वर्तमान में आगे बढ़ने के लिए एक नुकसान में हूं, हालांकि मुझे पता है कि मुझे दो छवियों की आवश्यकता होगी- एक "ज़ूम इन" आकार में और एक "ज़ूम आउट" आकार में। मैं jquery का उपयोग नहीं कर रहा हूं - मैं इसे अपने नियोक्ता के अनुरोध के माध्यम से वेबसाइट पर या किसी भी प्लगइन को इंस्टॉल नहीं कर सकता। मैं मूल रूप से कठिन जवाब मांग रहा हूं, और इसके लिए मैं पहले से क्षमा चाहता हूं। मुझे इसे मध्यम खरोंच से करना होगा। चेतावनी: मैं एक प्रोग्रामिंग छात्र हूं। जैसा आप चाहे उस के रूप में ले लो।

मुझे HTML और CSS स्क्रिप्ट मिली है, और क्योंकि हमारे पास वास्तव में कोई आईडीई नहीं है, इसलिए मैं इसे कोडेकैडी के प्रोजेक्ट सेक्शन पर कर रहा हूं, अन्यथा मुझे इसे पूरी तरह से लाइव करना होगा। आप मेरा कोड here पा सकते हैं, लेकिन मैं नीचे कोड भी पोस्ट करूंगा, क्योंकि उस लिंक को कोड बदलने के लिए बाध्य है क्योंकि यह प्रक्रियात्मक बचत का उपयोग करता है।

नोट: मूल रूप से यह था कि ग्रे बॉक्स मेरे माउस का सापेक्ष केंद्र पर चल रहा था। यह चले गए क्योंकि यह चले गए, लेकिन यह काम कर रहा था। हालांकि वर्तमान में यह निर्णय लिया गया है कि कम से कम मेरे काम कंप्यूटर पर नहीं। मैंने इसे अपने व्यक्तिगत कंप्यूटर पर परीक्षण नहीं किया है।

संपादित करें: कोड मेरे सतह प्रो 3 पर काम कर रहा है, हालांकि यह छवि के माउस (जो अस्थायी और कुछ यादृच्छिक है) का पालन करता है। मुझे यकीन है कि क्यों कोड मेरा काम कंप्यूटर पर काम नहीं कर रहा है नहीं कर रहा हूँ, हालांकि यह संभव है, क्योंकि यह एक Macintosh OSX संस्करण 10.6.8 है ...

एचटीएमएल कोड:

<!DOCTYPE html> 
<html> 
<head> 
    <link rel='stylesheet' href='style.css'/> 
    <script src='script.js'></script> 
</head> 
<body> 

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
<div id="overlay" onmousemove="zoomIn()"></div> 
</body> 
</html>

सीएसएस कोड:

#imgZoom { 
    height: 300; 
} 

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:20%; 
    height:20%; 
    padding: 25px; 
    border: 5px solid gray; 
    background-color: white; 
    opacity:0.4; 
    text-align:center; 
    z-index: 1000; 
}

जावास्क्रिप्ट कोड:

function zoomIn() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "visible"; 

    var x = event.clientX;  // Get the horizontal coordinate 
    var y = event.clientY;  // Get the vertical coordinate 

    element.style.top = y - 80; 
    element.style.left = x - 80; 
} 

function zoomOut() 
{ 
    var element = document.getElementById("overlay"); 
    element.style.visibility = "hidden"; 
}

स्रोत

2015-11-19 Kitfoxpup

jQuery स्थापना की आवश्यकता नहीं है पर पृष्ठभूमि स्थिति चलती इसकी सिर्फ अपलोड करने या जोड़ा जा रहा है की तरह वेब सर्वर पर फ़ाइलें या यदि आप jQuery सीडीएन या इसकी वेबसाइट '' – CY5

@ सीवाई 5 इसके बारे में क्षमा करें, मैं figu लाल JQuery को कुछ स्थापना की आवश्यकता है, खासकर यदि आप बूटस्ट्रैप जैसी चीजों का उपयोग करना चाहते हैं।जहां मैं प्रोग्रामिंग के लिए स्कूल में जाता हूं, मेरे अधिकांश प्रशिक्षकों ने हमें चेतावनी दी है कि वे JQuery पर भरोसा न करें, क्योंकि यह एक निश्चित उत्तर से अधिक क्रैच है- यह नहीं कि JQuery की एक बुरी बात है, यह एक छात्र के रूप में है जिसे मैं पूरी तरह से सीखने की कोशिश कर रहा हूं तरीका। मुझे लगता है कि मुख्य रूप से कारण यह है कि मैं इसका उपयोग नहीं करना चाहता, ताकि मैं इसे मैन्युअल रूप से कैसे करना सीख सकूं। मैं वास्तव में मुख्य रूप से वीडियो गेम के लिए प्रोग्रामर हूं, इसलिए हास्यास्पद रूप से कठिन कोड जिसमें कोई सहायक नहीं है, आमतौर पर मैं – Kitfoxpup

करता हूं, मैं आपसे सहमत हूं क्योंकि आप सीख रहे हैं कि आपको यह जानने का अधिकार है कि कोर से चीजें कैसे बनाई जाती हैं लेकिन भविष्य में याद रखें कि पहिया को पुनर्निर्मित करना बुरा है जहां आप समय की बाधा में काम करते हैं यदि आप इसे कुछ टूल के साथ आसानी से कर सकते हैं, तो आपको पता नहीं चलेगा कि आपकी चीजें कब टूट जाएंगी – CY5

आप माउसओवर पर पृष्ठभूमि स्थिति खेल कर यह सिर्फ कर सकते हैं बस माउसओवर DEMO

function zoomIn(event) { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "inline-block"; 
 
    var img = document.getElementById("imgZoom"); 
 
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; 
 
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; 
 
    element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px"; 
 

 
} 
 

 
function zoomOut() { 
 
    var element = document.getElementById("overlay"); 
 
    element.style.display = "none"; 
 
}

#overlay { 
 
    border: 1px solid black; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg'); 
 
    background-repeat: no-repeat; 
 
}

<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg"> 
 
<div id="overlay" onmousemove="zoomIn(event)"></div>

स्रोत

2015-11-19 18:40:35 CY5

यह शानदार लग रहा है, मैं इसे भी एक रन देने की कोशिश करूंगा। अब तक दोनों विकल्प शानदार हैं! – Kitfoxpup

मैंने आपके कोड @ सीवाई 5 की कोशिश की, लेकिन मुझे छवि के नीचे एक वर्ग मिल रहा है और ज़ूम की गई छवि स्थैतिक है और वास्तविक छवि का शीर्ष दायां हिस्सा दिखा रही है। –

यह मेरे लिए काम करता है: (यहाँ है एक JSFiddle)

#imgZoom { 
    height: 300; 
} 
img#imgZoom:hover { 
    position: relative; 
    -webkit-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    transform: scale(1.5); 
    z-index: 1000; 
}

तुम भी एक शांत संक्रमण प्रभाव के लिए इस जोड़ सकते हैं:

* { 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
}

* इसके अलावा, आप एक ही तर्क नहीं लागू कर सकते हैं केवल छवियों के लिए, लेकिन divs के लिए भी।

स्रोत

2015-11-19 18:09:48 Amit

मैं इसे अभी आज़मा दूंगा! – Kitfoxpup

यदि आप इसे लाइव देखना चाहते हैं तो मैंने एक JSFiddle जोड़ा। – Amit

यह अविश्वसनीय रूप से सहायक है। इसके अलावा मेरे अंत में संक्रमण करने से इंकार कर दिया, यह बहुत अच्छा लग रहा है और वास्तव में मुझे बस इतना ही चाहिए। मैं इसे अपने नियोक्ता द्वारा चलाऊंगा और देख सकता हूं कि वह क्या सोचता है! धन्यवाद! – Kitfoxpup

जावास्क्रिप्ट: jquery या plugins के बिना माउसओवर पर ज़ूम इन करें

उत्तर

संबंधित मुद्दे