การเลื่อน 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
บทความคนเข้าอ่านวันนี้
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
