प्रोग्रामिंग माउस इशारों

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

फिलहाल, पुस्तकालय केवल 8 सरल इशारों को समझता है:

• शीर्ष - माउस बटन को दबाए रखें और कर्सर को 50-200 पिक्सल (डिफ़ॉल्ट रूप से) से ऊपर ले जाएं और छोड़ें, एक्स अक्ष के साथ ऑफसेट कम से कम दो गुना कम होना चाहिए। y अक्ष से
• नीचे - नीचे कर्सर ले जाएँ
• वाम
• सही

और उनका डेरिवेटिव

• टॉप-लेफ्ट - X और Y कुल्हाड़ियों के साथ ऑफसेट दो बार से अधिक नहीं होना चाहिए
• ठीक ऊपर
• निचले-बाएं
• निचले दाएं

लाइब्रेरी को कनेक्ट करने के लिए आपको अपने पेज पर निम्न कोड जोड़ना होगा:

<script src = "javascript / navigation.js" type = "text / javascript"> </ script>

अगला, निम्नलिखित कोड की प्रतिलिपि बनाएँ:

<स्क्रिप्ट भाषा = "जावास्क्रिप्ट">
// घटना के लिए बाइंड फ़ंक्शन के लिए jQuery का उपयोग करें
$ (दस्तावेज़) .mousedown (नेवीगेशन .ousedown);
$ (दस्तावेज़) .mouseup (नेविगेशन। पति);

// सेट परमेस
नेविगेशन.मिनएक्स = 50;
नैविगेशन.मिन = 50;
नेवीगेशन। एमएक्सएक्स = 300;
नेवीगेशन। एमएक्सवाई = 300;
// कॉलबैक फ़ंक्शन
नैविगेशन.टॉपलिफ्ट = फंक्शन (एक्स, वाई) {};
नेविगेशन। टॉप = फ़ंक्शन (एक्स, वाई) {};
नैविगेशन। टॉप राइट = फंक्शन (एक्स, वाई) {};
नैविगेशन.लिफ्ट = फंक्शन (एक्स, वाई) {};
नैविगेशन.लाइट = फ़ंक्शन (एक्स, वाई) {};
नैविगेशन.बॉटम लोफ़्ट = फंक्शन (एक्स, वाई) {};
नैविगेशन.बॉटम = फंक्शन (एक्स, वाई) {};
नैविगेशन.बॉटॉमराइट = फ़ंक्शन (एक्स, वाई) {};
</ Script>

यह हमारे "इशारों" के लिए एक रिक्त है, वैश्विक घटनाओं मूसडाउन और माउसअप (jQuery पुस्तकालय का उपयोग किया जाता है) पर हमारे दो कार्यों को लटका देने के लिए पहली दो लाइनें आवश्यक हैं। अगली 4 लाइनें इशारों के मापदंडों को इंगित करती हैं, अर्थात्। सीमाएं जिसमें उन्हें ट्रिगर किया जाएगा। अगला 8 कॉलबैक फ़ंक्शन की घोषणा है, मापदंडों के रूप में वे एक्स और वाई अक्ष के साथ एक पूर्ण ऑफसेट लेते हैं।

हमारे कार्यों की झूठी ट्रिगर को बाहर करने के लिए, उन्हें दबाए गए Ctrl कुंजी से बांधना बेहतर है (Ctrl कुंजी कोड 17 है, यदि आप इसे बदलना चाहते हैं, तो पृष्ठ पर सभी कोड देखें http://unixpapa.com/js/key.html ):

$ (खिड़की) .keydown (फ़ंक्शन (घटना) {
स्विच (Event.keyCode) {
केस 17:
$ (दस्तावेज़) .mousedown (नेवीगेशन .ousedown);
$ (दस्तावेज़) .mouseup (नेविगेशन। पति);
तोड़;
}
});
$ (खिड़की) .keyup (फ़ंक्शन (घटना) {
स्विच (Event.keyCode) {
केस 17:
$ (दस्तावेज़) ।unbind ('मूसडाउन');
$ (दस्तावेज़) ।unbind ('माउसअप');
तोड़;
}
});

और यहाँ मेरे उदाहरण से कोड है:

फ़ंक्शन माउसगेशर्स () {
$ (खिड़की) .keydown (फ़ंक्शन (घटना) {
स्विच (Event.keyCode) {
// ...
// अलग-अलग चाबियां अलग-अलग काम करती हैं
// अलग-अलग ब्राउज़र विभिन्न कोड प्रदान करते हैं
// विवरण के लिए यहां देखें: unixpapa.com/js/key.html
// ...
केस 17:
$ (दस्तावेज़) .mousedown (नेवीगेशन .ousedown);
$ (दस्तावेज़) .mouseup (नेविगेशन। पति);
तोड़;
}
});
$ (खिड़की) .keyup (फ़ंक्शन (घटना) {
स्विच (Event.keyCode) {
केस 17:
$ (दस्तावेज़) ।unbind ('मूसडाउन');
$ (दस्तावेज़) ।unbind ('माउसअप');
तोड़;
}
});

नेवीगेशन। एमएक्सएक्स = 300;
नेवीगेशन। एमएक्सवाई = 300;
नैविगेशन.टॉपलिफ्ट = फंक्शन (एक्स, वाई) {सिलेक्ट ($ ('div # left div.top'), Math.abs (XY))};
नेविगेशन। टॉप = फ़ंक्शन (एक्स, वाई) {चयन ($ ('div # केंद्र div.top'), वाई)};
नैविगेशन.टोपाइट = फ़ंक्शन (एक्स, वाई) {सिलेक्ट ($ ('div # right div.top'), Math.abs (XY))};
नैविगेशन.लिफ्ट = फंक्शन (एक्स, वाई) {सिलेक्ट ($ ('div # left div.middle'), X)};
नैविगेशन।रूट = फ़ंक्शन (एक्स, वाई) {चयन ($ ('div # सही div.middle'), एक्स)};
नैविगेशन.बॉटम लोफ़्ट = फंक्शन (एक्स, वाई) {सिलेक्ट ($ ('div # left div.bottom'), Math.abs (XY))};
नैविगेशन.बॉटम = फंक्शन (एक्स, वाई) {सिलेक्ट ($ ('डि # सेंटर डि.बॉटम'), वाई)};
नैविगेशन.बॉटॉमराइट = फ़ंक्शन (एक्स, वाई) {सिलेक्ट ($ ('div # right div.bottom'), Math.abs (XY))};
}
फ़ंक्शन का चयन करें (एल, के) {
var गति = 1500;
स्विच (सत्य) {
मामला (के <50):
गति = 500;
तोड़;
मामला (के <100):
गति = 1000;
तोड़;
मामला (के <150):
गति = 1500;
तोड़;
मामला (के <200):
गति = 2000;
तोड़;
मामला (k> = 200):
गति = 2500;
तोड़;
}
el.animate ({
अपारदर्शिता: 0.4,
पृष्ठभूमि रंग: '# ffff00'
}, गति, "रैखिक",
समारोह () {
el.animate ({
अपारदर्शिता: 1,
पृष्ठभूमि रंग: '#fffff'
}, गति)
});
}

किसी तरह सब कुछ भ्रमित हो रहा है, चलो बेहतर है कि यह कैसे काम करता है ("Ctrl" को दबाए रखें और घटना को सक्रिय करने की कोशिश करें - किसी भी क्षेत्र पर क्लिक करें और माउस बटन को दबाएं और कर्सर को वांछित दिशा में 50-300 पिक्सेल तक ले जाएं) ...

मैं चयनित फ़ंक्शन पर थोड़ी टिप्पणी करूंगा, क्योंकि पहला पैरामीटर यह DOM तत्व लेता है जिसे हम चेतन करेंगे, दूसरा पैरामीटर गुणांक है, एनीमेशन गति इस पर निर्भर करेगी, गुणांक हमारे लिए ब्याज की धुरी के साथ आंदोलन की मात्रा है (या उनके बीच का अंतर) ...

यह सब साइट पर क्यों है? मेरे लिए यह काफी सुविधाजनक होगा यदि आप मंच के पिछले / अगले पृष्ठ पर जाने के लिए बाईं और दाईं ओर की घटनाओं को लटकाते हैं, शीर्ष घटना के लिए - पृष्ठ के मुख्य या शीर्ष पर लौटें, यह काम आ सकता है ...

क्रॉसपोस्ट: जावास्क्रिप्ट: प्रोग्रामिंग माउस जेस्चर