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

19 November 2009 By Ninenik Narkdee
แนวตั้ง รูปภาพ sprite images css jquery scrollbar

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



ตัวอย่างต่อไปนี้เป็นเพียงส่วนของการฝึกสร้าง 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 เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: รูปภาพ jquery css แนวตั้ง sprite images scrollbar







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











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