เมนูเลื่อนหด ประหยัดที่ดีครับ

สังคมแห่งการแบ่งปันความรู้ ข้อมูล ข่าวสาร

ตั้งเป็นหน้าแรก

สมัครเข้าร่วมแบ่งปัน

MeTuKYang > Scripts > Javascript > เมนูเลื่อนหด ประหยัดที่ดีครับ

Home - Java - Download - Tip - Menu ส่วน Head <script language="JavaScript1.2"> ie=document.all?1:0 n=document.layers?1:0 //กำหนดระยะเริ่มต้นที่ตัวอักษรปรากฏ lshow=35 //ระยะเป็น pixel ที่อักษรเคลื่อนที่ในแต่ละ step var move=10; //ความเร็ว,ค่าน้อยความเร็วมาก menuSpeed=10 //ต้องการให้เมนูเลื่อนตามหน้าหรือไม่ var moveOnScroll=false var tim; var ltop; function makeMenu(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') this.state=1 this.go=0 this.width=n?this.css.document.width:eval(obj+'.offsetWidth') this.left=b_getleft this.obj = obj + "Object"; eval(this.obj + "=this") } function b_getleft(){ var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft); return gleft; } function moveMenu(){ if(!oMenu.state){ clearTimeout(tim) mIn() }else{ clearTimeout(tim) mOut() } } function mIn(){ if(oMenu.left()>-oMenu.width+lshow){ oMenu.go=1 oMenu.css.left=oMenu.left()-move tim=setTimeout("mIn()",menuSpeed) }else{ oMenu.go=0 oMenu.state=1 } } function mOut(){ if(oMenu.left()<0){ oMenu.go=1 oMenu.css.left=oMenu.left()+move tim=setTimeout("mOut()",menuSpeed) }else{ oMenu.go=0 oMenu.state=0 } } function checkScrolled(){ if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop if(n) setTimeout('checkScrolled()',30) } function menuInit(){ oMenu=new makeMenu('divMenu') scrolled=n?"window.pageYOffset":"document.body.scrollTop" oMenu.css.left=-oMenu.width+lshow ltop=(n)?oMenu.css.top:oMenu.css.pixelTop; oMenu.css.visibility='visible' if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); } onload=menuInit; </SCRIPT> ส่วน Body <DIV id=divMenu style="height: 40; position: absolute; top: 40;left:-28; visibility: hidden; width: 300"> <p align="right"><b> <a href="/index.html" onclick="window.focus()" onmouseout="window.status='';return true;" onmouseover="window.status='หน้าหลัก';return true;">Home</a> - <a href="/js" onclick="window.focus()" onmouseout="window.status='';return true;" onmouseover="window.status='หน้าจาวาสคริป';return true;">Java</a> - <a href="/js" onclick="window.focus()" onmouseout="window.status='';return true;" onmouseover="window.status='หน้า Download';return true;">Download</a> - <a href="/js" onclick="window.focus()" onmouseout="window.status='';return true;" onmouseover="window.status='หน้า ทิปเทคนิค';return true;">Tip</a> - <a href="javascript:" onmouseover="moveMenu(); window.focus()" onmouseout="window.status='';return true;" onmouseover="window.status='Click For Menu';return true;"><font color="#FF0000">Menu</b></font></a> </DIV>		ตัวอย่าง example : ดูด้านซ้ายสิครับ วิธีใช้ : 1.นำ script ด้านซ้ายนี้ไปไว้ในส่วน <head></head> 2.นำ script ด้านล่างไปไว้ส่วน <body></body>ตรงไหนก้อได้ การปรับแต่ง : 1.เปลี่ยนเพิ่มเติม ลิ้งค์ในส่วนของ <body></body>