hoverMobile
1.0.0
تحاكي مكتبة JavaScript هذه تأثير التحويم على الأجهزة المحمولة ، مع مؤشر فقط عن طريق تحريك إصبعك على شاشة LCD.
| مثال 1 | مثال 2 |
|---|---|
راجع المثال على جهازك المحمول على http://www.gabrielconceicao.com/hovermobile أو تحقق من هذه المكتبة تعمل على موقع الويب الخاص بي: http://www.gabrielconceicao.com/
عندما يضغط المستخدم على LCD ثلاث مرات بسرعة كبيرة ، سيظهر المؤشر ويمكنه نقل إصبعه إلى العنصر مع بعض تأثير التحويم ورؤية هذا التأثير ، مثل سطح المكتب. إذا كان العنصر يحتوي على بعض كود JavaScript "On Hover" ، فسيتم تشغيله أيضًا مع مستمع. عندما يتوقف عن الضغط على شاشة LCD ، يزعج المؤشر.
ستقوم المكتبة بإطلاق النار على الحدث عندما يحوم العنصر ويطلق النار عندما يترك العنصر.
button:hover{
background-color: red;
}
كل ما عليك فعله هو إنشاء فصل جديد مثل هذا:
button.hover{
background-color: red;
}
JavaScript: مع هذه المكتبة ما هو الضروري لعمل حدث Mouseover على الأجهزة المحمولة؟
Simple حدد أحداث Touchenter و Touchleave في العناصر وستطلق المكتبة الأحداث.
مثال:
$('button').on('mouseover touchenter', function(e) {
// make something cool on hover
});
$('button').on('mouseleave touchleave', function(e) {
// make something cool on leave
});
يمكنك بدء هذه المكتبة ، واتصال وظيفة البدء مع هذه المعلمات:
<script type="text/javascript">
gO.ready( function(){
hoverMobile.start({
pointerEl: '.pointer',
animateEls: 'a,button,.more',
hideAfterTouch: true,
showPointer: true,
pointerOffsetX: 20,
pointerOffsetY: 70,
delayPointer: 200,
fireHoverEvent: true,
applyHoverCssEffect: true,
hoverClassName: 'hover',
});
});
</script>
تحدد المعلمة "animateels" عناصر DOM التي ستعرض التأثير.
انظر مثال على التنفيذ: https://github.com/gabrielpconceicao/hovermobile/blob/master/index.html#l33
هذه المكتبة تعتمد على go.library. لمزيد من المعلومات حول هذا ، راجع https://github.com/gabrielpconceicao/go-library
#عملية التطوير
