hoverMobile

HoverMobile.js: JavaScript Library เพื่อจำลองเอฟเฟกต์โฮเวอร์บนอุปกรณ์มือถือ

ไลบรารี JavaScript นี้จำลองเอฟเฟกต์โฮเวอร์บนอุปกรณ์มือถือด้วยตัวชี้โดยการเลื่อนนิ้วของคุณบน LCD

ตัวอย่างที่ 1	ตัวอย่างที่ 2

ดูตัวอย่างบนอุปกรณ์มือถือของคุณที่ http://www.gabrielconceicao.com/hovermobile หรือตรวจสอบห้องสมุดนี้ทำงานบนเว็บไซต์ของฉัน: http://www.gabrielconceicao.com/

มันทำงานอย่างไร?

เมื่อผู้ใช้กด LCD สามครั้งอย่างรวดเร็วตัวชี้จะปรากฏขึ้นและเขาสามารถเลื่อนนิ้วของเขาไปยังองค์ประกอบที่มีเอฟเฟกต์โฮเวอร์และดูเอฟเฟกต์นั้นเช่นที่เดสก์ท็อป หากองค์ประกอบมีรหัส JavaScript "on Hover" มันจะทำงานด้วยกับผู้ฟัง เมื่อเขาหยุดกดแอลซีดีตัวชี้จะหายไป

สามสิ่งที่จำเป็นในการทำงานคือ:

• เพิ่มห้องสมุดนี้ในเว็บไซต์ของคุณ
• กำหนดคลาส. hover สำหรับทุกองค์ประกอบที่มีคลาส A: Hover Pseudo และคัดลอกตรรกะเดียวกัน
• ในผู้ฟังโฮเวอร์ของคุณกำหนดเหตุการณ์ Touchenter และ Touchleave

ห้องสมุดจะยิง Tooterenter เหตุการณ์เมื่อเขาโฮเวอร์องค์ประกอบและไฟสัมผัสเมื่อออกจากองค์ประกอบ

: Hover CSS Pseudo Class Effect: มันทำงานอย่างไรในมือถือกับห้องสมุดนี้ได้อย่างไร?

สร้างคลาส. hover ในไฟล์ Stylesheet ของคุณเพื่อจำลอง: Hover Effect สิ่งที่คุณต้องทำคือทำซ้ำเนื้อหาของคลาส Pseudo นี้ไปยังคลาส. hover ตัวอย่าง:

 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
});

ตัวเลือกและการทำให้เป็น intialization

คุณสามารถเริ่มต้นไลบรารีนี้เรียกใช้ฟังก์ชันเริ่มต้นด้วยพารามิเตอร์นี้:

	<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

#ในกระบวนการพัฒนา