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

Bookmark and Share

 ขอให้ดูในส่วนรายละเอียดโค้ดภายในเป็นหลัก จะทำให้สามารถนำไปประยุกต์ใช้งาน ส่วนอื่นๆ ได้เช่น
---การหาตำแหน่งแกน 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

 




บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 1190 27 Jan 10 การใช้งาน jQuery.contains() ใน jQuery 1.4 อ่าน 1141 27 Nov 09 แก้ปัญหาความกว้าง option ของ select tag ใน ie ด้วย jQuery และ css อย่างง่าย อ่าน 1114 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 1102 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 1089 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 1008 05 Apr 10 กำหนด link ลิ้งค์ ทั้งหมด ให้ เปิดหน้าต่างใหม่ ด้วย jQuery อย่างง่าย อ่าน 956 26 Jan 10 การใช้งาน method .clearQueue() ใน jQuery 1.4 javascript library เวอร์ชั่นล่าสุด อ่าน 953 27 May 10 ทบทวน ลำดับ การทำงาน mouse events ใน jQuery อ่าน 927 21 Jul 10 เทคนิค การเพิ่ม ลบ แถว ในตาราง รายการข้อมูล ด้วย jQuery อย่างง่าย อ่าน 341
จำนวนผู้เยี่ยมชม 157925 คน 2010 © Copyright ninenik.com. All rights reserved.