【酷】JS+CSS实现滑动门与导航条的完美结合
代码简介:【酷】JS+CSS实现滑动门与导航条的完美结合
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【酷】JS+CSS实现滑动门与导航条的完美结合_网页代码站(www.webdm.cn)</title> <script language="javascript"> var currentSection = "home-pane"; // The default loaded section on the page var tabTag = "-tab"; var paneTag = "-pane"; // Scroll the page manually to the position of element "link", passed to us. function ScrollSection(link, scrollArea, offset) { // Store the last section, and update the current section if (currentSection == link) { return; } lastSection = currentSection; currentSection = link; // Change the section highlight. // Extract the root section name, and use that to change the background image to 'top', revealing the alt. state sectionTab = currentSection.split("-")[0] + tabTag; document.getElementById(sectionTab).className = 'active'; if (lastSection) { lastTab = lastSection.split("-")[0] + tabTag; document.getElementById(lastTab).className = "inactive"; } // Get the element we want to scroll, get the position of the element to scroll to theScroll = document.getElementById(scrollArea); position = findElementPos(document.getElementById(link)); // Get the position of the offset div -- the div at the far left. // This is the amount we compensate for when scrolling if (offset != "") { offsetPos = findElementPos(document.getElementById(offset)); position[0] = position[0] - offsetPos[0]; } scrollStart(theScroll, theScroll.scrollLeft, position[0], "horiz"); // return false; } function ScrollArrow(direction, toolbar, scrollArea, offset) { toolbarElem = document.getElementById(toolbar); toolbarNames = new Array(); // Find all the <li> elements in the toolbar, and extract their id's into an array. if (toolbarElem.hasChildNodes()) { var children = toolbarElem.childNodes; for (var i = 0; i < children.length; i++) { if (toolbarElem.childNodes[i].tagName == "LI") { toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]); } } } // Now iterate through our array of tab names, find matches, and determine where to go. for (var i = 0; i < toolbarNames.length; i++) { if (toolbarNames[i] == currentSection.split("-")[0]) { if (direction == "left") { if (i - 1 < 0) { gotoTab = toolbarNames[toolbarNames.length - 1]; } else { gotoTab = toolbarNames[i - 1]; } } else { if ((i + 1) > (toolbarNames.length - 1)) { gotoTab = toolbarNames[0]; } else { gotoTab = toolbarNames[i + 1]; } } } } // Go to the section name! ScrollSection(gotoTab + paneTag, scrollArea, offset); } var scrollanim = { time: 0, begin: 0, change: 0.0, duration: 0.0, element: null, timer: null }; function scrollStart(elem, start, end, direction) { //console.log("scrollStart from "+start+" to "+end+" in direction "+direction); if (scrollanim.timer != null) { clearInterval(scrollanim.timer); scrollanim.timer = null; } scrollanim.time = 0; scrollanim.begin = start; scrollanim.change = end - start; scrollanim.duration = 25; scrollanim.element = elem; if (direction == "horiz") { scrollanim.timer = setInterval("scrollHorizAnim();", 15); } else { scrollanim.timer = setInterval("scrollVertAnim();", 15); } } function scrollVertAnim() { if (scrollanim.time > scrollanim.duration) { clearInterval(scrollanim.timer); scrollanim.timer = null; } else { move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration); scrollanim.element.scrollTop = move; scrollanim.time++; } } function scrollHorizAnim() { if (scrollanim.time > scrollanim.duration) { clearInterval(scrollanim.timer); scrollanim.timer = null; } else { move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration); scrollanim.element.scrollLeft = move; scrollanim.time++; } } function findElementPos(elemFind) { var elemX = 0; var elemY = 0; do { elemX += elemFind.offsetLeft; elemY += elemFind.offsetTop; } while (elemFind = elemFind.offsetParent) //console.log("Found element "+elemFind+" at "+elemY+"/"+elemX); return Array(elemX, elemY); } function sineInOut(t, b, c, d) { return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; } </script> <style> a:link, a:visited { color: #505050; text-decoration: none; } a:hover, a:active { color: #505050; text-decoration: underline; } #toolbarwrap { width: 415px; height: 45px; margin: 0 auto; padding: 0; background: #101010 url(http://www.webdm.cn/images/20100913/header.gif) repeat-x 0 0; border-bottom: 6px solid #790000; position: relative; } ul.navigation { margin: 0; padding: 0; list-style-type: none; } ul.navigation li { float: left; padding: 0 0 0 25px; } ul.navigation li a { float: left; line-height: 38px; border-top: 5px solid #202020; color: #707070; } ul.navigation li a:hover { text-decoration: none; border-top: 5px solid #606060; color: #BCBCBC; } ul.navigation li.active { color: #BCBCBC;; text-decoration: underline; } ul.navigation li.inactive { text-decoration: none; color: #707070; } #frame { overflow: hidden; margin: 0 auto; width: 413px; border-left: 1px solid #606060; border-right: 1px solid #606060; border-bottom: 1px solid #606060; } #scroller { width: 415px; margin: 0 auto; overflow: hidden; } #content { width: 2490px; } .section { width: 405px; float: left; padding: 5px; text-align: center; background-color: #151515; } </style> </head> <body style="font-family: Lucida Grande; font-size: 12px; color: #fff; background-color: #101010; "> <div id="toolbarwrap"> <ul id="toolbar" class="navigation"> <li id="home-tab"><a href="#" onclick="javascript:ScrollSection('home-pane', 'scroller', 'home-pane'); return false">Home</a></li> <li id="about-tab"><a href="#" onclick="javascript:ScrollSection('about-pane', 'scroller', 'home-pane'); return false">About</a></li> <li id="scripts-tab"><a href="#" onclick="javascript:ScrollSection('scripts-pane', 'scroller', 'home-pane'); return false">Scripts</a></li> <li id="downloads-tab"><a href="#" onclick="javascript:ScrollSection('downloads-pane', 'scroller', 'home-pane'); return false">Downloads</a></li> <li id="faq-tab"><a href="#" onclick="javascript:ScrollSection('faq-pane', 'scroller', 'home-pane'); return false">FAQ</a></li> <li id="contact-tab"><a href="#" onclick="javascript:ScrollSection('contact-pane', 'scroller', 'home-pane'); return false">Contact</a></li> </ul> </div> <div id="frame"> <div id="scroller"> <div id="content"> <div class="section" id="home-pane"> This would be the content for the 'Home' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Contact</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">About</a> » <br /> </div> <div class="section" id="about-pane"> This would be the content for the 'About' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Home</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">Scripts</a> » <br /> </div> <div class="section" id="scripts-pane"> This would be the content for the 'Scripts' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">About</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">Downloads</a> » <br /> </div> <div class="section" id="downloads-pane"> This would be the content for the 'Downloads' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Scripts</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">FAQ</a> » <br /> </div> <div class="section" id="faq-pane"> This would be the content for the 'FAQ' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">Downloads</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">Contact</a> » <br /> </div> <div class="section" id="contact-pane"> This would be the content for the 'Contact' navigation item. <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> « <a href="javascript:ScrollArrow('left','toolbar','scroller','home-pane');">FAQ</a> <a href="javascript:ScrollArrow ('right','toolbar','scroller','home-pane');">Home</a> » <br /> </div> </div> </div> </div> <p> </p> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/1c220e06-f491-4472-a448-b8c20ad0dcbe.html