Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng tab động
URL: https://www.javascriptbank.com/animated-minitabs.html
Hiệu ứng tạo một trình đơn nằm ngang trên trang web. Mỗi khi người dùng rê con trỏ chuột đến các mục chọn của trình đơn thì đường gạch chân của mục chọn sẽ trượt theo.
Phiên bản đầy đủ: jsB@nk » Trình đơn » Định hướng » Menu dạng tab động
URL: https://www.javascriptbank.com/animated-minitabs.html
<style type="text/css">#miniflex { width: 100%; float: left; font-size: small; /* could be specified at a higher level */ margin: 0; padding: 0 10px 0 10px; border-bottom: 1px solid #696; position:relative; z-index:2;}#miniflex li { float: left; margin: 0; padding: 0; display: inline; list-style: none; position:relative;}#miniflex a:link, #miniflex a:visited { float: left; font-size: 85%; line-height: 20px; font-weight: bold; margin: 0 10px 0 10px; text-decoration: none; color: #9c9;}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover { border-bottom: 4px solid #696; padding-bottom: 2px; color: #696;} #animated-tab { position: absolute; z-index: 1; font-size: 85%; line-height: 20px; padding-bottom: 2px; border-bottom: 4px solid #696;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript">// Created by: Brian McAllister :: http://www.frequency-decoder.com//*Animated miniTabs by frequency decoderFurther information on this script can be locatedon the authors Web site http://www.frequency-decoder.com/Based on an idea by Rob L Glazebrook(http://www.rootarcana.com/test/smartmini/)which was derived from the original idea of Stephen Clark(http://www.sgclark.com/sandbox/minislide/)Changes=======05/03/06 : Creation08/03/06 : Added the cleanUp method to stop IE memory leaks.This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" licenseYou are free: 1. to copy, distribute, display, and perform the work. 2. to make derivative works.Under the following conditions: 1. **Attribution*: You must attribute the work in the manner specified by the author or licensor. 2. Noncommercial*: You may not use this work for commercial purposes.* 3. Share Alike*: If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.*/var miniTab = { currentTab: 0, activeTab: 0, destX: 0, destW: 0, t: 0, b: 0, c: 0, d: 20, animInterval: null, sliderObj: null, aHeight: 0, init: function() { if(!document.getElementById || !document.getElementById("miniflex")) return; var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); for(var i = 0, li; li = liArr[i]; i++) { liArr[i].onmouseover = aArr[i].onfocus = function(e) { var pos = 0; var elem = this.nodeName == "LI" ? this : this.parentNode; while(elem.previousSibling) { elem = elem.previousSibling; if(elem.tagName && elem.tagName == "LI") pos++; } miniTab.initSlide(pos); } } ul.onmouseout = function(e) { miniTab.initSlide(miniTab.currentTab); }; for(var i = 0; i < aArr.length; i++) { if(document.location.href.indexOf(aArr[i].href)>=0) { miniTab.activeTab = miniTab.currentTab = i; } aArr[i].style.borderBottom = "0px"; aArr[i].style.paddingBottom = "6px"; } miniTab.slideObj = ul.parentNode.appendChild(document.createElement("div")); miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160))); miniTab.slideObj.id = "animated-tab"; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; miniTab.slideObj.style.left = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px"; miniTab.slideObj.style.width = aArr[miniTab.activeTab].offsetWidth + "px"; miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop; miniTab.initSlide(miniTab.activeTab, true); var intervalMethod = function() { miniTab.slideIt(); } miniTab.animInterval = setInterval(intervalMethod,10); }, cleanUp: function() { clearInterval(miniTab.animInterval); miniTab.animInterval = null; }, initSlide: function(pos, force) { if(!force && pos == miniTab.activeTab) return; miniTab.activeTab = pos; miniTab.initAnim(); }, initAnim: function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft); miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth); miniTab.t = 0; miniTab.b = miniTab.slideObj.offsetLeft; miniTab.c = miniTab.destX - miniTab.b; miniTab.bW = miniTab.slideObj.offsetWidth; miniTab.cW = miniTab.destW - miniTab.bW; miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px"; }, slideIt:function() { var ul = document.getElementById("miniflex"); var liArr = ul.getElementsByTagName("li"); var aArr = ul.getElementsByTagName("a"); // Has the browser text size changed? if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) { miniTab.initAnim(); miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop }; if(miniTab.t++ < miniTab.d) { var x = miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d); var w = miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d); miniTab.slideObj.style.left = parseInt(x) + "px"; miniTab.slideObj.style.width = parseInt(w) + "px"; } else { miniTab.slideObj.style.left = miniTab.destX + "px"; miniTab.slideObj.style.width = miniTab.destW +"px"; } }, animate: function(t,b,c,d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }}window.onload = miniTab.init;window.onunload = miniTab.cleanUp;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><ul id="miniflex"> <li><a href="/about/" title="">About</a></li> <li><a href="/archives/" title="">Archives</a></li> <li><a href="/the-language-in-the-lab/" title="">The Language in the Lab</a></li> <li><a class="active" href="/demo/animated-minitabs/" title="">MiniTab demo</a></li> <li><a href="/contact/" title="">Contact</a></li></ul><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->