สร้างแอคชั่น เมื่อเลื่อนเมาส์มาเจอ ด้วย jQuery

ขอบคุณตัวอย่างโค้ดจาก Menn Studio ได้รับอนุญาตให้เผยแพร่ได้

เกริ่นนำ

คำสั่ง jQuery สามารถสร้างลูกเล่นต่างๆ ให้เว็บไซต์ของเราให้ดูวูปวาปได้อย่างหลากหลาย
บทความนี้มาประยุกต์ คำสั่ง scroll กันว่า เมื่อเลื่อนเมาส์มาเจอแล้วให้แสดงแอคชั่นต่างๆ ขึ้นมากันครับ

ตัวอย่างการเขียนโค้ด

(function(e){e.fn.visible=function(t,n,r){var i=e(this).eq(0),s=i.get(0),o=e(window),u=o.scrollTop(),a=u+o.height(),f=o.scrollLeft(),l=f+o.width(),c=i.offset().top,h=c+i.height(),p=i.offset().left,d=p+i.width(),v=t===true?h:c,m=t===true?c:h,g=t===true?d:p,y=t===true?p:d,b=n===true?s.offsetWidth*s.offsetHeight:true,r=r?r:"both";if(r==="both")return!!b&&m<=a&&v>=u&&y<=l&&g>=f;else if(r==="vertical")return!!b&&m<=a&&v>=u;else if(r==="horizontal")return!!b&&y<=l&&g>=f}})(jQuery)

jQuery(window).scroll(function(event) {
  
     jQuery("#stat").each(function(i, el) {
	var el = jQuery(el);
	if (el.visible(true)) {
	     jQuery('#stat').addClass("action"); 
	} else {
	     jQuery('#stat').removeClass("action");
	}
     });
  
});

• jQuery(window).scroll คือ คำสั่งเช็ค mouse scroll
• jQuery(“#stat”).each คือ คำสั่งเมื่อเจอไอดี stat
• jQuery(‘#stat’).addClass(“action”) คือ คำสั่งให้แอดคลาส action ในไอดี stat
• jQuery(‘#stat’).removeClass(“action”) คือ คำสั่งให้ปิดคลาส action ในไอดี stat

ตัวอย่างการแสดงผล

• Facebook
• Twitter
• Line

Narongchai Suphiratwanich (K)

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย