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

07 December 2009

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

17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 2898 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 2810 30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2765 20 Aug 09 jQuery ป้องกัน การคลิกขวา ในหน้าเว็บไซต์ อ่าน 2757 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2746 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attribute อ่าน 2739 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2719 28 Jun 10 การเลือก หรือ ไม่เลือก checkbox ทั้งหมด และ hilight ด้วย jQuery อย่างง่าย อ่าน 2719 29 Oct 10 แนะนำ jQuery CountDown plugin สวยๆ สำหรับประยุกต์ใช้งาน อ่าน 2711 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบตัวกรองพื้นฐาน อ่าน 2700 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2683 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2617 29 Nov 09 กำหนด hilight ของ cell ข้อมูลในตาราง ด้วย jQuery และ CSS อย่างง่าย อ่าน 2608 25 Sep 08 หาตำแหน่งของ element แนวแกน x แกน y ด้วยฟังก์ชันของ jQuery อ่าน 2571 22 Aug 10 สร้าง waiting page ให้รอสักครู่ ก่อนลิ้งค์ ไปเว็บอื่น ด้วย jQuery และ php อ่าน 2552

บทความคนเข้าอ่านวันนี้

25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2746 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8806 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4216 21 Dec 10 กำหนด ปุ่ม ให้ทำงาน เมื่อคลิกที่ checkbox ยอมรับเงื่อนไข ด้วย jQuery อ่าน 2171 19 Apr 10 สอน jQuery เพิ่มรูปภาพ ให้ตัวเลือก ใน listbox อ่าน 4467 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1793 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 5205 25 Sep 08 การทำให้หน้าเว็บของเราสามารถดูได้อย่างเดียว อ่าน 2388 07 Dec 09 การเลื่อน scrollbar อัตโนมัติตาม การเลื่อนขึ้นลง ของ mouse ด้วย jQuery อ่าน 2907 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2291 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 4569 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 6684 21 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1 อ่าน 1394 16 Aug 09 เริ่มต้น jQuery UI กับการสร้าง ปฏิทินเลือกวันที่ datepicker อ่าน 17242 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 4238 25 Oct 08 สร้างฟังก์ชันการหา whois เบื้องต้นด้วย php อย่างง่าย อ่าน 1417 30 Sep 08 แปลงตัวแปร String เป็นค่าตัวเเลข อ่าน 2767 26 Mar 09 กำหนดข้อความเริ่มต้นให้กับ input text ด้วย jquery อย่างง่าย อ่าน 3200 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5563 19 Mar 10 ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSS อ่าน 3508
จำนวนผู้เยี่ยมชม 777890
คน 2012 © Copyright ninenik.com. All rights reserved.