สร้าง scrollbar แนวตั้ง จากรูปภาพ ด้วยเทคนิค css sprite image และ jQuery

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
รูปภาพ css jquery scrollbar แนวตั้ง sprite images

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ รูปภาพ css jquery scrollbar แนวตั้ง sprite images



ตัวอย่างต่อไปนี้เป็นเพียงส่วนของการฝึกสร้าง scrollbar แนวตั้ง จากรูปภาพที่กำหนดเอง ด้วยเทคนิค css sprite image และ jQuery ส่วนการประยุกต์ใช้ เช่น การทำ scrollbar แนวนอน, การนำไปใช้กับ textarea ,iframe,div และอื่นๆ จะขอกล่าวภายหลัง

ตัวอย่างผลลัพธิ์ สามารถคลิกเลื่อนขึ้นลง หรือลากเลื่อนขึ้นลงได้

รูปที่ใช้

CSS code

<style type="text/css">
ul#myUIscroll{
	margin:0;padding:0;
	list-style:none;
	width:20px;
	display:block;
}
ul#myUIscroll li{
	margin:0;padding:0;
	list-style:none;
	width:20px;
	float:left;
	clear:both;
}
/* css สำหรับกำหด ปุ่ม เลื่อนขึ้น */
ul#myUIscroll li.upArrow{
	background:url(images/myscrollBar.png) 0 0 no-repeat;
	height:20px;
	cursor:pointer;
}
/* css สำหรับกำหดแถบกลาง */
ul#myUIscroll li.middleBar{
	background:url(images/myscrollBar.png) -40px 0 repeat-y;
	height:200px; /* สำหรับกำหดนความสูงของ scrollbar */
}
/* css สำหรับกำหด ปุ่ม เลื่อนลง */
ul#myUIscroll li.downArrow{
	background:url(images/myscrollBar.png) -20px 0 no-repeat;
	height:20px;
	cursor:pointer;	
}
/* css สำหรับกำหด ปุ่ม เลื่อนตรงกลาง */
div.faceBar{
	position:absolute;
	display:block;float:left;
	width:20px;height:20px;
	cursor:pointer;
	background:url(images/myscrollBar.png) -60px 0 no-repeat;
}
</style>

HTML code

<ul id="myUIscroll">
<li class="upArrow"></li>
<li class="middleBar"><div class="faceBar"></div></li>
<li class="downArrow"></li>
</ul>    

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(){  
	$("div.faceBar").mousedown(function(event){  
		var locateY=event.pageY;      
		var obj_locateY=$(this).offset().top;         
		var diff_y=locateY-obj_locateY;        
		var minY=$("li.middleBar").offset().top;
		var maxY=$("li.downArrow").offset().top;
		maxY-=$("li.downArrow").height();
		$(this).mousemove(function(event){  
			locateY=event.pageY;      
			obj_locateY=$(this).offset().top;                       
			new_locateY=locateY-diff_y;         
			if(new_locateY>=minY && new_locateY<=maxY){                  
				$(this).css({  
					top:new_locateY  
				}).bind("mouseup mouseout",function(){        
					$(this).unbind("mousemove");          
				});        
			 }          
		});  
	});  
		
	
	$("li.downArrow").click(function(){
		var new_locateBar=$("div.faceBar").offset().top;
		var minY=$("li.middleBar").offset().top;
		var maxY=$("li.downArrow").offset().top;			
		new_locateBar+=20;
		if(new_locateBar>=minY && new_locateBar<maxY){       
			$("div.faceBar").css({  
				top:new_locateBar  
			});
		}
	});
	
	$("li.upArrow").click(function(){
		var new_locateBar=$("div.faceBar").offset().top;
		var minY=$("li.middleBar").offset().top;
		var maxY=$("li.downArrow").offset().top;			
		new_locateBar-=20;
		if(new_locateBar>=minY && new_locateBar<maxY){       
			$("div.faceBar").css({  
				top:new_locateBar  
			});
		}
	});	
	
});  
</script>  


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ