การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery

07 December 2009 By Ninenik Narkdee
เลื่อน scrollbar อัตโนมัติ mouse jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เลื่อน scrollbar อัตโนมัติ mouse jquery



 ขอให้ดูในส่วนรายละเอียดโค้ดภายในเป็นหลัก จะทำให้สามารถนำไปประยุกต์ใช้งาน ส่วนอื่นๆ ได้เช่น
---การหาตำแหน่งแกน x ตำแหน่งแกน y
---การหาความสูงของ window และความสูงของ document
---การเลื่ยน scrollbar เป็นต้น
สามารถนำไปประยุกต์กับ element ตัวอื่นๆ ที่มี scrollbar ได้

ตัวอย่าง http://www.ninenik.com/demo/scroll_bar.php

 

Javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
		$(document).mousemove(function(event){ // กำหนด event เมื่อมีการเลื่อนเมาส์
			var MouseX = event.clientX; // หาตำแหน่งแนวแกน x ของ mouse
			var MouseY = event.clientY; // หาตำแหน่งแนวแกน y ของ mouse
			var Hdocument=$(document).height(); // หาความสูงของเว็บเพจ โดยรวมส่วนที่ไม่แสดงด้วย
			var HWindow=$(window).height(); // หาความสูงของหน้าต่างเว็บเพจ
			var DifH=Hdocument-HWindow; // หาค่าความต่าง
			var MultiDif=HWindow/MouseY; // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 1
			var ScrollMe=parseInt(DifH/MultiDif); // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 2
			window.scrollTo(0,ScrollMe);  // เลื่อน scrollbar ไปยังตำแหน่งที่ต้องการ
		});
		$(document).bind("contextmenu",function(event){ // ยกเลิกการเลื่อนอัตโนมัติโดยการคลิกขวา
			$(document).unbind("mousemove");
			return false;
		});
		$("input#StopScroll").click(function(){ // หรือกำหนดยกเลิกการเลื่อนอัตโนมัติโดยการคลิกที่ปุ่ม
			$(document).unbind("mousemove");
		});
});  
</script>

ตัวอย่าง http://www.ninenik.com/demo/scroll_bar.php

 



อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: scrollbar jquery อัตโนมัติ เลื่อน mouse







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ