一种内容选项卡效果
<br/><br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br/><title>无标题文档</title><br/></head><br/><style type="text/css"><br/><!--<br/>body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"}<br/>body{ text-align:center; font-size:12px}<br/>li{ list-style:none}<br/>.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}<br/>.rolinList li{margin-bottom:1px;border:1px solid #DADADA}<br/>.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}<br/>.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}<br/>.content p{ margin:12px}<br/>--><br/></style><br/><script type="text/javascript"><br/>//<![CDATA[<br/>window.onload = function() {<br/>rolinTab("rolin")<br/>}<br/>function rolinTab(obj) {<br/>var list = $(obj).getElementsByTagName("LI");<br/>var state = {show:false,hidden:false,showObj:false};<br/><br/>for (var i=0; i<list.length; i++) {<br/>var tmp = new rolinItem(list[i],state);<br/>if (i == 0) tmp.pShow();<br/>}<br/>}<br/><br/>function rolinItem(obj,state) {<br/>var speed = 0.0666; <br/>var range = 1;<br/>var interval;<br/>var tarH;<br/>var tar = this;<br/>var head = getFirstChild(obj);<br/>var content = getNextChild(head);<br/>var isOpen = false;<br/>this.pHidden = function() {<br/>if (isOpen) hidden();<br/>}<br/>this.pShow = show;<br/><br/>var baseH = content.offsetHeight;<br/>content.style.display = "none";<br/>var isOpen = false;<br/><br/>head.onmouseover = function() {<br/>this.style.background = "#EFEFEF";<br/>}<br/><br/>head.onmouseout = mouseout;<br/><br/>head.onclick = function() {<br/>this.style.background = "#EFEFEF";<br/>if (!state.show && !state.hidden) {<br/>if (!isOpen) {<br/>head.onmouseout = null;<br/>show();<br/>} else {<br/>hidden();<br/>}<br/><br/>}<br/>}<br/><br/>function mouseout() {<br/>this.style.background = "#FFF"<br/>}<br/>function show() {<br/>head.style.borderBottom = "1px solid #DADADA";<br/>state.show = true;<br/>if (state.openObj && state.openObj != tar ) {<br/>state.openObj.pHidden();<br/>}<br/>content.style.height = "0px";<br/>content.style.display = "block";<br/>content.style.overflow = "hidden";<br/>state.openObj = tar;<br/>tarH = baseH;<br/><br/>interval = setInterval(move,10);<br/>}<br/>function showS() {<br/>isOpen = true;<br/>state.show = false;<br/>}<br/><br/>function hidden() {<br/>state.hidden = true;<br/>tarH = 0;<br/>interval = setInterval(move,10);<br/>}<br/><br/>function hiddenS() {<br/>head.style.borderBottom = "none";<br/>head.onmouseout = mouseout;<br/>head.onmouseout();<br/>content.style.display = "none";<br/>isOpen = false;<br/>state.hidden = false;<br/>}<br/><br/>function move() {<br/>var dist = (tarH - content.style.height.pxToNum())*speed;<br/>if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;<br/>content.style.height = (content.style.height.pxToNum() + dist) + "px";<br/>if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {<br/>clearInterval(interval);<br/>content.style.height = tarH + "px";<br/>if (tarH != 0) {<br/>showS()<br/>} else {<br/>hiddenS();<br/>}<br/>}<br/>}<br/><br/>}<br/>var $ = function($) {return document.getElementById($)};<br/>String.prototype.pxToNum = function() {return Number(this.replace("px",""))}<br/>function getFirstChild(obj) {<br/>var result = obj.firstChild;<br/>while (!result.tagName) {<br/>result = result.nextSibling;<br/>}<br/>return result;<br/>}<br/><br/>function getNextChild(obj) {<br/>var result = obj.nextSibling;<br/>while (!result.tagName) {<br/>result = result.nextSibling;<br/>}<br/>return result;<br/>}<br/>//]]><br/></script><br/><body><br/><ul class="rolinList" id="rolin"><br/> <li><br/> <h2>选项卡 1</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/> <li><br/> <h2>选项卡 2</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/> <li><br/> <h2>选项卡 3</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/> <li><br/> <h2>选项卡 4</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/> <li><br/> <h2>选项卡 5</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/> <li><br/> <h2>选项卡 6</h2><br/> <div class="content"><br/> <p>这里是内容<br /><br/> <br /><br/> <a href="http://www.xunzou.com/" target="_blank">http://www.xunzou.com/</a></p><br/> </div><br/> </li><br/></ul><br/></body><br/></html><br/>
0 条留言
我要留言