Onmousewheel पर डॉटिंग और प्याज सूप के बारे में थोड़ा

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

तो, कार्य: एक विशिष्ट ब्लॉक पर माउस व्हील को स्क्रॉल करने की घटनाओं पर प्रतिक्रिया को लागू करने के लिए, अर्थात्, ब्राउज़र विंडो के "देशी" स्क्रॉल को छूने के बिना। कार्यान्वयन क्रॉस-ब्राउज़र होना चाहिए और किसी भी ढांचे का उपयोग नहीं करना चाहिए।

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

सबसे पहले, मैंने पूरे विंडो (विंडो ऑब्जेक्ट) के लिए ऑनम्यूशेविल को पकड़ने की समस्या को हल किया। यह इस तरह तय किया गया था:

window.onload = function() {  if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false);  window.onmousewheel = document.onmousewheel = mouse_wheel; } 

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

 var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; } 

पहली पंक्ति के साथ सब कुछ स्पष्ट है - यह IE के लिए एक बैसाखी है। मैं आपको दूसरी पंक्ति के बारे में अधिक बताऊंगा। इसमें, मैं यह निर्धारित करता हूं कि पहिया किस दिशा में घूमता है। फ़ायरफ़ॉक्स को छोड़कर सभी ब्राउज़र व्हीलडेल्टा संपत्ति में 120 या -120 के बराबर दिशा को पार करते हैं, यह निर्भर करता है कि पहिया कहाँ घूम रहा है। दूसरी ओर, मोज़िला, विस्तार संपत्ति से संचालित होता है, इसे क्रमशः मान -3 या 3 निर्दिष्ट करता है। हां, बिल्कुल, संकेत मेल नहीं खाता है। इसलिए, दूसरी पंक्ति मैं विभिन्न ब्राउज़रों के डेटा को +1 करता हूं यदि पहिया घूम रहा है (-1 से) और यदि पहिया नीचे की तरफ घूम रहा है (तो)। खैर, मैं एक कंडोम में "के रूप में डाल दिया || असत्य "परमाणु युद्ध या किसी अन्य विदेशी चीज़ के मामले में।"

कार्यक्रम कम से कम पूरा हो गया है। मैं सभी ब्राउज़रों में माउस व्हील स्क्रॉल इवेंट को पकड़ता हूं और यह भी जानता हूं कि पहिया किस दिशा में घूम रहा है। हम और आगे जा रहे हैं।

अब आपको एक निश्चित ब्लॉक पर इस घटना को पकड़ने की जरूरत है, और पहले से ही इसके साथ कुछ करना है। यह, उदाहरण के लिए, सामग्री का एक ही स्क्रॉल या खिलाड़ी का वॉल्यूम नियंत्रण हो सकता है। एक उदाहरण के रूप में, मैंने एक प्रकार की रंग-बिरंगी सामग्री बनाने का फैसला किया, जिसमें लाल, हरे या नीले रंग के घटकों को संबंधित ब्लॉक पर पहिया को स्क्रॉल करके निर्धारित किया जाता है। वह है, कुछ इस तरह:



मैंने सबसे सरल और थोड़ा सा कॉन्डो तरीके से अभिनय करने का फैसला किया: मैंने वैश्विक चर पहिया_हैंडल (अशक्त या एक और गलत तरह का डिफ़ॉल्ट मान) स्थापित किया, जिसे एक निश्चित ब्लॉक पर ऑनमूवर इवेंट के दौरान अग्रिम में परिभाषित एक निश्चित फ़ंक्शन सौंपा जाएगा। जब ओस्मोसेवेल को चालू किया जाता है तो फ़ंक्शन निष्पादित किया जाएगा और स्क्रॉलिंग की दिशा इसे एक पैरामीटर के रूप में स्थानांतरित की जाएगी। कोड इस तरह दिखने लगा:

 var wheel_handle = null; var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") {  wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() {  wheel_handle = func; } document.getElementById(id).onmouseout = function() {  wheel_handle = null; } } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; } 

सिद्धांत रूप में, सब कुछ स्पष्ट होना चाहिए, लेकिन सिर्फ मामले में। माउस_व्हील फ़ंक्शन, दिशा और व्हील_हैंडल की उपस्थिति में "फ़ंक्शन" प्रकार के साथ, उस फ़ंक्शन को निष्पादित करता है जिसे व्हील_हैंडल को सौंपा गया है। सेट_हैंडल फ़ंक्शन निर्धारित करता है कि कौन से फ़ंक्शन को निष्पादित करने के लिए कौन से ब्लॉक। यह है, मेरे उदाहरण के लिए, डिजाइन से थोड़ा आगे चल रहा है

 set_handle("r", set_red); 

इसका मतलब यह होगा कि जब आप पहचानकर्ता "आर" के साथ ब्लॉक पर माउस ले जाते हैं, तो चर व्हील_हैंडल को सेट_एड फ़ंक्शन सौंपा जाएगा, जो ऑनमेसवेल इवेंट के मामले में दिशा पैरामीटर के साथ निष्पादित किया जाएगा।

मैं एक उदाहरण तैयार करता हूं:

 <!DOCTYPE html> <html> <head>  <style type="text/css">   #r { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; background: #000; }   #g { position: absolute; left: 120px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; }   #b { position: absolute; left: 230px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; }   #result { position: absolute; left: 10px; top: 120px; width: 320px; height: 100px; background: #000; }  </style>  <script type="text/javascript">   var wheel_handle = null;   var rgb = {    r: 0,    g: 0,    b: 0,    result: 0   } var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() { wheel_handle = func; }; document.getElementById(id).onmouseout = function() { wheel_handle = null; }; } var set_red = function(direction) { rgb.r += direction; if (rgb.r < 0) rgb.r = 0; if (rgb.r > 255) rgb.r = 255; document.getElementById("r").innerHTML = rgb.r; document.getElementById("r").style.backgroundColor = "rgb(" + rgb.r + ", 0, 0)"; set_result(); } var set_green = function(direction) { rgb.g += direction; if (rgb.g < 0) rgb.g = 0; if (rgb.g > 255) rgb.g = 255; document.getElementById("g").innerHTML = rgb.g; document.getElementById("g").style.backgroundColor = "rgb(0, " + rgb.g + ", 0)"; set_result(); } var set_blue = function(direction) { rgb.b += direction; if (rgb.b < 0) rgb.b = 0; if (rgb.b > 255) rgb.b = 255; document.getElementById("b").innerHTML = rgb.b; document.getElementById("b").style.backgroundColor = "rgb(0, 0, " + rgb.b + ")"; set_result(); } var set_result = function() { document.getElementById("result").style.backgroundColor = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"; } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; set_handle("r", set_red); set_handle("g", set_green); set_handle("b", set_blue); } </script> </head> <body style="height: 1000px;"> <div id="r">0</div> <div id="g">0</div> <div id="b">0</div> <div id="result"></div> </body> </html> 

प्रपत्र सेट के कार्य_ * स्पष्ट हैं और, मेरी राय में, टिप्पणियों की आवश्यकता नहीं है। लेकिन आपको बॉडी टैग की शैली पर ध्यान देने की आवश्यकता है। मैंने 1000 पिक्सेल ऊँचाई सेट की है ताकि पृष्ठ को स्क्रीन पर फिट होने की गारंटी न हो और इसका अपना स्क्रॉलबार हो। यदि आप इस रूप में उदाहरण को चलाते हैं, तो ब्लॉकों पर ऑनम्यूव्हील ईवेंट काम करेंगे, लेकिन एक ही समय में पेज खुद ही नीचे स्क्रॉल हो जाएगा। मैंने माउस_व्हील () फ़ंक्शन में एक छोटी लाइन में रखी समस्या के विवरण को फिर से पढ़ा;

 var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { if (event.preventDefault) event.preventDefault(); event.returnValue = false; wheel_handle(direction); } } 

ईवेंट को रद्द करने के लिए preventDefault () की आवश्यकता है। वैसे भी, उसे इवेंट रद्द करने की आवश्यकता है। सामान्य तौर पर, मैं थोड़ा Google उद्धृत करूंगा:

यदि ईवेंट को पूर्ववत किया जा सकता है, तो ईवेंट को रद्द करने के लिए ईवेंट ऑब्जेक्ट का निवारण () विधि का उपयोग किया जाता है। इसका मतलब यह है कि इस घटना के होने पर किसी विशेष कार्यान्वयन में की गई क्रिया निष्पादित नहीं की जाएगी। यदि इवेंट के विकास में किसी भी चरण में StopDefault () विधि को कॉल किया जाता है, तो ईवेंट रद्द कर दिया जाता है। डिफ़ॉल्ट रूप से इस ईवेंट द्वारा की गई कार्रवाई नहीं की जाती है। किसी ईवेंट के लिए इस विधि को कॉल करना जो पूर्ववत नहीं किया जा सकता है, घटना के आगे निष्पादन पर कोई प्रभाव नहीं पड़ता है। कॉल के बाद, घटना के प्रचार के दौरान निवारण () विधि जारी रहेगी। ईवेंट स्ट्रीम के किसी भी चरण पर StopDefault () विधि को कॉल किया जा सकता है।

event.returnValue IE के लिए है जो कि preventDefault () के बारे में नहीं जानता है।

घटना के लिए प्राकृतिक प्रतिक्रिया रद्द - हम अपना कार्य करते हैं। विंडोज के तहत, आठवें फ़ायरफ़ॉक्स में, मैंने नोट किया कि stopDefault () हमेशा सही तरीके से काम नहीं करता था। हालाँकि, हो सकता है कि यह कुछ ऑनमॉज़्टर स्पेसिफ़िक हो, क्योंकि यह देखा गया था कि ब्लॉक में टेक्स्ट पर कर्सर होने पर गलत संचालन होता है। यदि किसी को इन आपदाओं के बारे में पता है, तो कृपया सूचित करें - यहाँ Google ने मदद नहीं की।

लेकिन, सामान्य तौर पर, यह सब है। पूर्ण में कॉपी-पेस्ट के लिए स्रोत कोड:

 <!DOCTYPE html> <html> <head> <style type="text/css"> #r { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height: 100px; background: #000; } #g { position: absolute; left: 120px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #b { position: absolute; left: 230px; top: 10px; width: 100px; height: 100px; font-size: 50px; color: #fff; text-align: center; line-height:100px; background: #000; } #result { position: absolute; left: 10px; top: 120px; width: 320px; height: 100px; background: #000; } </style> <script type="text/javascript"> var wheel_handle = null; var rgb = { r: 0, g: 0, b: 0, result: 0 } var mouse_wheel = function(event) { if (false == !!event) event = window.event; var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false; if (direction && !!wheel_handle && typeof wheel_handle == "function") { if (event.preventDefault) event.preventDefault(); event.returnValue = false; wheel_handle(direction); } } var set_handle = function(id, func) { document.getElementById(id).onmouseover = function() { wheel_handle = func; } document.getElementById(id).onmouseout = function() { wheel_handle = null; } } var set_red = function(direction) { rgb.r += direction; if (rgb.r < 0) rgb.r = 0; if (rgb.r > 255) rgb.r = 255; document.getElementById("r").innerHTML = rgb.r; document.getElementById("r").style.backgroundColor = "rgb(" + rgb.r + ", 0, 0)"; set_result(); } var set_green = function(direction) { rgb.g += direction; if (rgb.g < 0) rgb.g = 0; if (rgb.g > 255) rgb.g = 255; document.getElementById("g").innerHTML = rgb.g; document.getElementById("g").style.backgroundColor = "rgb(0, " + rgb.g + ", 0)"; set_result(); } var set_blue = function(direction) { rgb.b += direction; if (rgb.b < 0) rgb.b = 0; if (rgb.b > 255) rgb.b = 255; document.getElementById("b").innerHTML = rgb.b; document.getElementById("b").style.backgroundColor = "rgb(0, 0, " + rgb.b + ")"; set_result(); } var set_result = function() { document.getElementById("result").style.backgroundColor = "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"; } window.onload = function() { if (window.addEventListener) window.addEventListener("DOMMouseScroll", mouse_wheel, false); window.onmousewheel = document.onmousewheel = mouse_wheel; set_handle("r", set_red); set_handle("g", set_green); set_handle("b", set_blue); } </script> </head> <body style="height: 1000px;"> <div id="r">0</div> <div id="g">0</div> <div id="b">0</div> <div id="result"></div> </body> </html> 

एक कार्यशील उदाहरण से लिंक करें

नायब! सम्मानित टिप्पणीकारों की सलाह से पूरक, एक कार्य उदाहरण से लिंक करें
- "जादू स्थिरांक" के लिए निश्चित बंधन;
- संभाल करने के लिए कॉल के संदर्भ को निर्दिष्ट करने की क्षमता जोड़ा: बंधन समारोह अब mousewheel.set_wheel_handle (आईडी, दुर्गंध, संदर्भ) की तरह दिखता है;
- ओनमुसेवेल से जुड़ी हर चीज Mousewheel.js लाइब्रेरी में लिपटी है।

और, वास्तव में, प्याज का सूप से क्या लेना-देना है? खैर सबसे पहले । और, दूसरी बात, मैं नहीं जानता कि आप कैसे हैं, और यहाँ मास्को में ठिठुरन ने मुझे मारा। -10, बेशक, मुस्कराते हुए, लेकिन बदकिस्मत जुकाम अभी पूरी तरह से खिलते हैं। अप्रिय, सहमत हैं?

मैं एक कटोरे में गर्म, सुगंधित प्याज सूप की कटोरी की तुलना में सर्दी के सभी प्रकार की रोकथाम के लिए एक बेहतर उपाय नहीं जानता, और मैं इसे इस तरह से पकाना:

• मैं 50-60 मिनट के लिए ओवन में डाल देता हूं मुझे शोरबा के लिए सब कुछ चाहिए: लाल प्याज की एक जोड़ी, बड़ी गाजर, अजवाइन की जड़, लहसुन का एक सिर और निश्चित रूप से, मांस - अच्छा बीफ़ का एक टुकड़ा और बड़ी हड्डियों का एक जोड़ा;
• मैं प्याज, साधारण प्याज या shallots काटता हूं - काफी, 800 ग्राम, किलोग्राम - और इसे एक गर्म मोटी कच्चा लोहा बर्तन या फूलगोभी में डाल देता हूं, जिसमें मैं 150-200 ग्राम मक्खन पिघलाता हूं, गर्मी को कम से कम करें और इसे तीन घंटे तक गर्म करने के लिए छोड़ दें, समय-समय पर सरगर्मी;
• मैं शोरबा पकाना - एक ठोस व्यंजन, दो लीटर ठंड (!) पानी के साथ ओवन में बेक किया गया सब कुछ डालना और इसे न्यूनतम संभव आग पर डालना। इसे व्यावहारिक रूप से उबालना नहीं चाहिए: केंद्र में दो या तीन बुलबुले - और यह पर्याप्त है। यदि यह कठिन उबलता है, तो इसे एक करछुल के साथ स्कूप करें और इसे ऊंचाई से वापस डालें;
• जब (तीन घंटे के बाद) प्याज लगभग सजातीय हो जाता है और दूध चॉकलेट का रंग बदल जाता है, तो मैं एक गिलास सफेद शराब डालता हूं, एक उबाल लाता हूं और पका हुआ और तनावपूर्ण शोरबा डालता हूं। इसके अलावा, इस स्तर पर, आप सौ ग्राम क्रीम क्रीम का एक ग्राम जोड़ सकते हैं, लेकिन यह आवश्यक नहीं है;
• लगभग तीस मिनट के बाद, मैं दो सौ ग्राम क्रीम जोड़ता हूं, सूप में आधा गिलास पानी में एक चम्मच आटा डालने के बाद, अच्छी तरह मिलाएं: सूप लगभग समान होना चाहिए (यदि संदेह है, तो आप इसे हैंड ब्लेंडर के साथ दिमाग में ला सकते हैं, जमीन का काली मिर्च और जड़ी-बूटियों को जोड़ सकते हैं, जिसे पूरी तरह से पकाया जाना चाहिए। थोड़ा - थाइम, दौनी, बे पत्ती या थोक में गार्नी का पूरा गुलदस्ता;
• एक और बीस मिनट और सूप तैयार है: मैं बे पत्ती को निकालता हूं और त्यागता हूं, और बाकी चीनी मिट्टी या मिट्टी की गहरी प्लेटों में croutons और पतले कटा हुआ रेनेट पनीर के साथ परोसता हूं। क्राउटन - एक प्लेट में, पनीर - अलग से।

बोन एपेटिट, सामान्य रूप से। बेशक, तैयारी में कम से कम 4 घंटे लगते हैं, लेकिन परिणाम इसके लायक है, मेरा विश्वास करो। और सामान्य तौर पर, मैं शेफ और प्रोग्रामर के बीच कई समानताएं देखता हूं, लेकिन अगली बार के बारे में अधिक, और शायद सभी समान, हबरामोर में।

बीमार मत बनो!