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

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

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

ดูแล้ว 13,772 ครั้ง


ตัวอย่างต่อไปนี้เป็นเพียงส่วนของการฝึกสร้าง 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 สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







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