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

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()